css中子元素相對于父元素定位

2021-07-28 04:32:40 字數 418 閱讀 6680

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

相對參照元素進行定位

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

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

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

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

top left right bottom 指的是距離這4個邊多少距離

css子元素如何相對父元素定位?

css123 4567 891011 div1 div2 效果原理 瀏覽器渲染html,是有文件流的說法的,塊級元素換行渲染,行內元素行內渲染,在這裡,兩個div都是塊級元素,乙個父,乙個子,正常來說的渲染結果是父元素在瀏覽器左上角,子元素在父元素的左上角。如果我們要對子元素相對父元素進行定位,就要...

css子元素如何相對父元素定位?

css123 4567 891011 div1 div2 效果原理 瀏覽器渲染html,是有文件流的說法的,塊級元素換行渲染,行內元素行內渲染,在這裡,兩個div都是塊級元素,乙個父,乙個子,正常來說的渲染結果是父元素在瀏覽器左上角,子元素在父元素的左上角。如果我們要對子元素相對父元素進行定位,就要...

css子元素如何相對父元素定位?

css123 4567 891011 div1 div2 效果原理 瀏覽器渲染html,是有文件流的說法的,塊級元素換行渲染,行內元素行內渲染,在這裡,兩個div都是塊級元素,乙個父,乙個子,正常來說的渲染結果是父元素在瀏覽器左上角,子元素在父元素的左上角。如果我們要對子元素相對父元素進行定位,就要...