CSS 父元素中的絕對定位

position屬性實現絕對定位

<html>
<head>
<title>position屬性</title>
<style type="text/css">
<!--
body{
    margin:10px;
    font-family:Arial;
    font-size:13px;
}
#father{
    background-color:#a0c8ff;
    border:1px dashed #000000;
    width:100%;
    height:100%;
}
#block{
    background-color:#fff0ac;
    border:1px dashed #000000;
    padding:10px;
    position:absolute; /* absolute絕對定位 */
    left:20px; /* 塊的左邊框離頁面左邊界20px */
    top:40px; /* 塊的上邊框離頁面上邊界40px */
}
-->
</style>
</head>
<body>
<div id="father">
<div id="block">absolute</div>
</div>
</body>
</html>

以上的代碼我們可以看出父塊#father沒有設置position屬性,而子塊#block采用的是絕對定位,經過測試發現子塊#block參照瀏覽窗口左上角

為原點,子塊左邊框相對頁面<body>左邊的距離為20px,子塊的上邊框相對頁面<body>上面的距離為40px

為父塊這是position屬性

#father{
    background-color:#a0c8ff;
    border:1px dashed #000000;
    position:relative;
    width:100%;
    height:100%;
}

我們發現子塊的參照物為父塊的#father,距左側20px,距上端40px

注意top、right、bottom、left這4個CSS屬性，它們都是配合position屬性使用的，表示的是塊的各個邊界離頁面邊框(position設置為absolute時)

或者原來的位置(position設置為relative)的距離。只有當position屬性設置為absolute或者relative時才能生效；

用position屬性實現相對定位

<html>
<head>
<title>position屬性</title>
<style type="text/css">
<!--
body{
    margin:10px;
    font-family:Arial;
    font-size:13px;
}
#father{
    background-color:#a0c8ff;
    border:1px dashed #000000;
    width:100%; height:100%;
    padding:5px;
}
#block1{
    background-color:#fff0ac;
    border:1px dashed #000000;
    padding:10px;
    position:relative; /* relative相對定位 */
    left:15px; /* 子塊的左邊框距離它原來的位置15px */
    top:10%;
}
-->
</style>
</head>
<body>
<div id="father">
<div id="block1">relative</div>
</div>
</body>
</html>

我們可以看到字塊的左邊框相對于其父塊的左邊框(它原來所在的位置)距離為15px,上邊框也是一樣的道理,為10%;

理解"它原來的位置":子塊和父塊原先的位置的是一致的(因為父塊包含字塊,視覺上看是幾乎重疊的)

此時子塊的寬度依然是未移動前的寬度,撐滿未移動前父塊的內容。只是由于向右移動了，因此右邊框超出了父塊。

如果希望子塊的寬度僅僅為其內容加上自己的padding值，可以將它的float屬性設置為left，或者指定其寬度width；

案例: 文本在圖片上顯示

看下問題的截圖：

大家可以先想一想

下面是我總結的方法：

方法一：子元素浮動float:left；（考慮脫離文檔流后后面元素不易控制，故不首選）

方法二：子元素：display: inline-block; --->會有空隙

原因：因為行內元素或者行內塊元素換行后之間會有一個間隙只要換行會有5px的間距--->解決 : 文本不換行

問題：https://blog.csdn.net/qq_39189819/article/details/90813184

原理

行內元素和行內塊元素換行后之間會有一個間隙

方法三：子元素寫display: inline-block; 給父元素寫font-size:0; 把所有間距都去了

方法四：彈性盒子是 CSS3 的一種新的布局模式，給父元素加display:flex;是標準文檔流---可以高效的布局 IE10以下不支持

、問題：元素浮動導致的父元素高度塌陷

父元素在文檔流中高度默認是被子元素撐開的，當子元素脫離文檔流以后，將無法撐起父元素的高度，也就會導致父元素的高度塌陷。父元素的高度一旦塌陷, 所有標準流中元素的位置將會上移，導致整個頁面的布局混亂。

例如：

的效果是：

二、為了解決問題，這里先介紹一下浮動元素的特點：

（1）元素浮動以后會完全脫離文檔流，浮動以后元素會一直向父元素的最上方移動，直到遇到父元素的邊框或者其他的浮動元素，會停止移動。

（2）如果浮動元素的上邊是一個塊元素，則浮動元素不會覆蓋塊元素。

（3）浮動元素不會超過它上邊的浮動的兄弟元素，最多一邊齊。

（4）浮動元素不會覆蓋文字，文字會自動環繞在浮動元素的周圍，可以通過浮動來實現文字環繞的效果。

（5）塊元素脫離文檔流以后，不會獨自占一行，寬度和高度都被內容撐開。

（6）內聯元素脫離文檔流以后會變成塊元素

三、解決方法

(1)浮動元素后添加<div class="clear"></div>添加清除浮動樣式，使用這種方式會在頁面中添加多余的結構。

(2)使用after偽類，向父元素后添加一個塊元素，并對其清除浮動。該種方式的原理和方法一原理一樣，但是不用向頁面中添加多余的結構。

(3)為父元素添加樣式overflow:hidden。這種方法對于有子元素有定位并且要求超出父容器范圍的情況不適用。

(4)手動為父元素添加高度，需要計算內容的高度，不便于頁面調整。

四種方法都可以實現調整，調整后的效果：

這里推薦第二種方法，使用after偽類的方式。

在線咨詢

上一篇：ThinkPHP之去掉文章中的所有HTML標簽并截取部分內容作為簡介
下一篇：Html基本理論與標簽使用

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS 父元素中的絕對定位

您的項目需求