是否可以使用柔性佈局來定位絕對定位的元素？

即使未知其高度和寬度，CSS3 flexbox或flex佈局也可以輕鬆地將元素水平和垂直居中。是否可以使用柔性佈局來定位絕對定位的元素？

是否可以使用彈性佈局將覆蓋（未知高度和寬度）絕對放置在頁面中央？

2013-05-26 Xavi

什麼樣的代碼你嘗試過這麼遠嗎？ – Vector

如果元素絕對定位，元素將失去其彈性項目狀態。爲了做到你所建議，你需要絕對定位柔性容器：因爲絕對定位打破在Firefox Flex容器

.foo { 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -webkit-box-pack: center; 
    -webkit-box-align: center; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

.bar { 
    margin: auto; 
} 

<div class="foo"> 
    <div class="bar">Bar</div> 
</div>

請注意，我省略了MOZ 2009年Flexbox的前綴。它應該在具有標準Flexbox屬性的Firefox版本中僅工作。

來源

2013-05-26 15:19:19 cimmanon

這實際上回答了我的問題，但是......我用這個解決方案的問題是容器覆蓋整個頁面，這意味着所有底層鏈接停止工作（不僅僅是覆蓋層本身的底層鏈接）。你知道一種避免這種情況的方法嗎？ – Xavi

這是絕對定位的限制。您可以修改z-index，但不能將.foo放在其他元素下面，同時將.bar放在最前面。如果沒有確切地看到你要做什麼後果，很難進一步提出建議。 – cimmanon

是的，這就是我所嘗試的，即修改z-索引，但我發現你剛纔所說的。我想要做的就是敬酒，就像Android敬酒一樣（http://developer.android.com/guide/topics/ui/notifiers/toasts.html），但我想在屏幕中垂直居中，並且任何未被吐司覆蓋的底層鏈接，按鈕等都應保持活躍。 – Xavi

在我的情況下，它以絕對元素爲中心。瀏覽器：Chrome的56.0 https://codepen.io/MarvinXu/pen/WjprpL

.flexbox { 
 
     display: flex; 
 
     height: 200px; 
 
     align-items: center; 
 
    } 
 
    
 
    .abs { 
 
     position: absolute; 
 
     right: 0; 
 
    }

<div class="flexbox"> 
 
    <span>inline</span><span class="abs">position:absolute</span> 
 
    </div>

來源

2017-04-28 03:37:28

在Safari 10.1.2中不起作用 – ramusus

是否可以使用柔性佈局來定位絕對定位的元素？

回答

相關問題