css子元素如何相對父元素定位操作方式

2021-10-11 17:40:31 字數 743 閱讀 5014

css123

4567

891011

#div1

#div2

效果原理

瀏覽器渲染html,是有文件流的說法的,塊級元素換行渲染,行內元素行內渲染,在這裡,兩個div都是塊級元素,乙個父,乙個子,正常來說的渲染結果是父元素在瀏覽器左上角,子元素在父元素的左上角。

如果我們要對子元素相對父元素進行定位,就要用對position屬性。

position屬性值

屬性值 描述

absolute 生成絕對定位的元素,相對於 static 定位以外的第乙個父元素進行定位。

relative 生成相對定位的元素,相對於其正常位置進行定位。

我們知道,要使用相對于父元素的定位,肯定要使用absolute,為什麼直接使用absolute不起作用?因為使用absolute相對于父元素定位,對父元素有乙個要求,就是父元素的position不能是static,如果父元素的position是static那麼就繼續向上查詢元素,知道找不position不為static的元素,對這個元素進行相對定位,所以,需要將父元素的position設定為relative,這樣做是沒有影響的,因為,relative只是相對於正常位置進行定位,正常位置就是所謂的文件流預設的輸出位置,如果我們設定了position為relative而不設定偏移量x,y,那就相當於父元素的位置是沒有變動的。

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

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

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

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

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

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