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

在css中，可以使用position屬性，透過為父元素設定相對定位「position:relative;」樣式，給子元素設定絕對定位「position:absolute;」樣式來實現子元素相對父級元素定位。

本教學操作環境：windows7系統、css2版，此方法適用於所有品牌電腦。

相關推薦：《程式設計影片課程》

css中子元素相對父元素定位的實作方法

父層級元素樣式設定：

position:relative;

子元素樣式：

position:absolute;

範例程式碼：

html結構

<div id="div1">
<div id="div2"></div>
</div>

css

#div1{
width:500px;height:500px;
background-color:darkgray;
position:relative;
}
#div2{
width:30px;height:30px;
background-color:red;
position:absolute;
right:20px;
}

效果

原理

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

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

position屬性值

屬性值	#描述
absolute	產生絕對定位的元素，相對於static 定位以外的第一個父元素進行定位。
relative	產生相對定位的元素，相對於其正常位置進行定位。

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

想要查閱更多相關文章，請造訪PHP中文網！ ！

以上是css子元素如何相對父元素定位？的詳細內容。更多資訊請關注PHP中文網其他相關文章！