flex布局與position定位存在衝突

2021-10-21 13:47:53 字數 1191 閱讀 8697

情況:現在布局很多時候用到flex方式,有次我將flex布局後的元素b,然後給元素b新增position定位,發現元素b無法被子元素撐開

<

!doctype html>

"zh-cn"

>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1"

/>

flex布局與position定位存在衝突<

/title>

* #container

#content

#content li

<

/style>

<

/head>

"container"

>

"content"

>

<

/li>

<

/li>

<

/li>

<

/li>

<

/ul>

<

/div>

<

/body>

<

/html>

解決方式一

給#content手動設定寬度為100%

#content

解決方式二

為#content包裹一層

#content

.box

"container"

>

="box"

>

"content"

>

<

/li>

<

/li>

<

/li>

<

/li>

<

/ul>

<

/div>

<

/div>

參考自 flex布局與position:absolute/fixed的衝突問題

position與多列布局

關於position absolute 它不是相對於視窗而是相對於最近的 positioned 祖先元素。如果絕對定位 position屬性的值為absolute 的元素沒有 positioned 祖先元素,那麼它是相對於文件的body元素,並且它會隨著頁面滾動而移動。記住乙個 positioned...

flex布局 Flex布局

摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫,意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...

position(定位)布局

屬性值 說明static 預設值。沒有定位,元素按照標準文件流布局 inherit 繼承父元素的position值 relative 相對定位,盒子的位置以標準文件流的排版方式為基準,然後相對於它原本的標準位置偏移,相對定位的盒子仍然在標準流中。absolute 絕對定位,盒子的位置以它最靠近的已經...