Relative與Absolute組合使用

2021-09-07 06:38:51 字數 1297 閱讀 3764

小夥伴們學習了絕對定位的方法:使用position:absolute可以實現被設定元素相對於瀏覽器(body)設定定位以後,

1、參照定位的元素必須是相對定位元素的前輩元素:

<

div

id="box1"

>

<

div

id="box2"

>相對參照元素進行定位

div>

div>

從上面**可以看出box1是box2的父元素(父元素當然也是前輩元素了)。

2、參照定位的元素必須加入position:relative;

#box1
3、定位元素加入position:absolute,便可以使用top、bottom、left、right來進行偏移定位了。

#box2
這樣box2就可以相對于父元素box1定位了(這裡注意參照物就可以不是瀏覽器了,而可以自由設定了)。

示例:

doctype html

>相對參照元素進行定位

title

>

<

style

type

="text/css"

>

divh1

#box3

#box4

style

>

head

>

<

body

>

<

h1>下面是演示部分

h1>

<

div

id="box3"

>

<

img

src=""

>

<

div

id="box4"

>當我還是三年級的學生時是乙個害羞的小女生。

div>

div>

body

>

html

>

效果:

absolute 與 relative 的運用

div css 進行網頁布局,適當地運用 absolute 與 relative,能給布局帶來意想不到的效果和方便,達到事半功倍,最近在有一篇關於 absolute 與 relative 的運用的文章,但講解不全面,不容易讀懂。下面我嘗試寫下一些我的看法,希望對你有幫助 詳細講解兩者的關係,需要配合...

absolute與relative的愛恨情仇

absolute 第一種情況 1,相對於乙個已定位的包含它的元素 父類 子類 菜鳥教程解釋 位置設定為 absolute 的元素,可定位於相對於第乙個已定位 非靜態的 的包含它的元素的指定座標。此元素的位置可通過 left top right 以及 bottom 屬性來規定。截圖 由結果可知,當父類...

relative學習筆記

限制left top right bottom定位 父元素使用了relative定位後,使用了absolute的子元素無法越過父元素進行定位 限制z index層級 使用了relative定位的同級元素,其本身的z index值將決定其子元素的z index層級 限制在overflow下的囂張氣焰 ...