自由な位置に配置する
<style> .fl { position: absolute; left: 100px; } </style> <div>DIV1</div> <div>DIV2</div> <div class="fl">DIV3</div> <div>DIV4</div> <div>DIV5</div> <div>DIV6</div>
DIV1
DIV2
DIV3
DIV4
DIV5
DIV6
自由な位置に配置する2
<style> .relative{ position: relative; height: 100%; } .block1{ position: absolute; top: 10px; left: 30px; width: 200px; height: 150px; border: 1px solid black; } .block2 { position: absolute; bottom: 10px; left: 200px; right: 50px; height: 100px; border: 1px solid black; } </style> <div class="relative"> <div class="block1">block1</div> <div class="block2">block2</div> </div>
block1
block2
重ねる
<style> .haeder-base{ position: relative; } .header { height: 100px; border: 1px solid black; } .icon { position: absolute; height: 50px; width: 50px; right: 50px; top: 75px; border: 1px solid black; background-color: white; } </style> <div class="haeder-base"> <div class="header">ヘッダー</div> <div class="icon">アイコン</div> </div>
ヘッダー
アイコン