1. 程式人生 > >相對定位與絕對定位聯合使用

相對定位與絕對定位聯合使用

image 什麽 png col 內容 -c 位置 blog 定位在

使用相對定位可以很方便的原來的位置上,移動一下,但是又會占用原來的位置,後面的內容接不上來 。
有時候,希望一個元素在原來的位置上,移動一下,但是又不占用位置,這個時候,就需要絕對定位和相對定位組合使用了。

1. 首先對一個div(d1)使用相對定位在當前的位置上,但是什麽內容都不放。
2. 然後,在這個div(d1)裏放一個絕對定位的div(d2),因為絕對定位是一其定位了的父容器來調整位置的,所以就會在這個相對定位的div(d1)的基礎上調整位置,看上去就是在原來的基礎上調整了位置,並且還不占用

<style>
div.r{
  position: relative;
  left
: 0; top: 0; } div.a{ position: absolute; left: 150px; top: 0px; } </style> <p>正常文字1</p> <p>正常文字2</p> <div class="r"> <div class="a">相對定位的文字3(不占坑)</div> </div> <p>正常文字4</p> <p>正常文字5</p>

技術分享

相對定位與絕對定位聯合使用