關於position和float的用法！

時間 2019-11-08

標籤關於 position float 用法欄目 CSS 简体版

原文原文鏈接

我要說的是這部分的切圖, 先說一下爲何要用到position javascript

看個人截圖, 應該知道這塊的組成是有兩部分, 但中間那個綠圈中, 組成的兩個部分有重疊的, 這時候, 可能會想用float, 但float有一個問題, 就是當在同一行的width加起來大於所在div的寬度時, 就會分行了!! css

因此就要用position的absolute解決 float的問題.html

通常我會先寫結果, 無論裏面是什麼圖片仍是標籤java

首先在最外面用一個div, class=top_modulejquery

具體的css div.top_module{position: relative;width: 100%; height: 503px;}ide

這個div是重點, 必須在css裏聲明position: relative; 這個div聲明瞭relative後, 其實裏面聲明position:absolute 都是這個div爲參考物, 像裏面的absolute元素聲明瞭left:0px(還有其餘的), 就會和這個聲明relative的左邊靠在一塊兒了! spa

另外寬度和高度也是必須的, 後面再說緣由!!htm

div.top_module div.slideBox{position: absolute;width: 768px; height: 476px;left: 0px;bottom: 0px;}blog

div.top_module div.latestsnap{position: absolute;width: 280px;height: 452px;top:0px;right: 0px;background-color: #1e1;} 圖片

position: absolute 這個不用說了, 還有大小, 這兩個子元素都是用 left, right, top bottom 這些來定位,

這裏要說的就是, 在用了position後, margin padding這些都會失效的, 由於這兩個只有在display含有block 下才會生效的. 像display:block, 和display:inline-block;

並且div是默認爲display:block的

就連a標籤, 默認狀況下都沒辦法用margin padding, 這時通常會給a標籤聲明一個display:inline-block;

當用了position:absolute後, 會另不少屬性失效的, 其中有一個問題就是absolute的父元素不會再根據其實子元素所須要的寬度和高度自動調節自身的寬高

<!DOCTYPE html>

<head>

<style>

div.module{width: 1007px;margin: 0px auto;}/*不知道爲何把這部分獨立後, css的優先級下降了不少, 徹底不生效了*/

div.top_module{position: relative;width: 100%; height: 503px;}

div.top_module div.slideBox{position: absolute;width: 768px; height: 476px;left: 0px;bottom: 0px;background-color: #ddd;}

div.top_module div.latestsnap{position: absolute;width: 280px;height: 452px;top:0px;right: 0px;background-color: #1e1;}

</style>

</head>

dfadsf

</div>

dffadsf

</div>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。