Css位置相對/絕對擾亂佈局

請檢出以下小提琴 HTML結構與Css幾乎相同。我正在使用我的項目。目前，我有3個部分在我的設計 HEADER 組合滑塊令人不安的部分Css位置相對/絕對擾亂佈局

我使用自舉3最新版本。

我已經給出位置相對投資組合部分和它的內部塊以絕對頂部位置：-50px;

這裏的每件事都很好。但問題來了，當我添加新的部分「滑塊」。它將通過投資組合部分。我試圖給它的位置和不同的塊屬性。但滑塊部分仍然通過投資組合部分。當我從投資組合中刪除持倉部分時，Slider部分回到正常位置，這正是我想要的。任何人都可以請檢查下面的小提琴，並告訴我我做錯了什麼。設計就像投資組合部分稍微超過標題。這就是爲什麼我使用職位。

<script async src="//jsfiddle.net/DTcHh/29616/embed/"></script> 
https://jsfiddle.net/DTcHh/29616/

來源

2017-02-12 Danial

你不能在提問中嵌入小提琴。您需要手動添加代碼。 – BoltClock

我寧可不使用位置：絕對不需要，因爲它不需要，因爲它打破了流動。您只需要定位相對或負邊距頂部以向上移動元素。見示例https://jsfiddle.net/DTcHh/29623/

<header class="container-fluid header"> 
    <div class="row"> 
    <h1>HEADER</h1> 
    </div> 
</header> 
<section class="container"> 
    <div class="row position-relative"> 
    <div class="col-sm-10 col-sm-offset-1 position-relative-col"> 
     <div class="height"> 
     <h2>Some Portfolio items here</h2> 
     </div> 
    </div> 
    </div> 
</section> 
<section class="container trouble"> 
    <div class="row"> 
    <h3>Slider Troubling section</h3> 
    </div> 
</section> 

/* Latest compiled and minified CSS included as External Resource*/ 

/* Optional theme */ 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
.header { 
    background: lightblue; 
    padding:25px; 
} 
.position-relative { 
    position:relative; 
} 
.position-relative-col { 
    background: green; 
    position: relative; 
    top: -50px; 
} 
.trouble { 
    background: darkblue; 
    opacity: 0.8; 
    color: white; 
} 
.height { 
    height: 100px; 
}

來源

2017-02-12 12:48:51

嗨.. !!此解決方案有效。我有一個問題？有什麼理由不使用位置：絕對？因爲當我從我的代碼中刪除絕對位置，並給予頂部：-50px到我的相對定位元素佈局是固定的。 – Danial

因爲如果你設置position：absolute，你會打破元素的流動，並因此破壞了佈局。所以，如果你可以使用位置相對或負邊緣頂部確實。這對100％是正確的。如果它適用於您，請將其標記爲答案。 –

感謝您的解釋。 – Danial

嘗試添加到容器類的height屬性。它應該工作：

.container{ 
    height: 100px; 
}

來源

2017-02-12 12:33:25 Eliran

我給.container一個固定的高度。但由於集裝箱高度將根據投資組合項目而變化。所以我認爲應該有另一種方式？ – Danial

所以也許最好不要使用絕對位置，而是使用相對位置並將容器放在邊緣。 – Eliran

檢查我的更新，我希望它可以幫助。

http://jsfiddle.net/DTcHh/29626/

我做什麼都放在滑塊和投資組合爲，使用position:relative和top: -50px;

來源

2017-02-12 12:52:19 zalijal

謝謝。你剛剛解決了我的問題。但我有一個問題。爲什麼你沒有在內部div上使用絕對位置，並給它頂部：-50px？你只是直接給頂部：-50px相對位置？有什麼我應該知道的嗎？在我原來的項目代碼中，我只刪除了position：absolute，並給出top：-50px到我的相對定位元素，並且佈局得到了修復。 – Danial

我不知道如何解釋這一點，讓我嘗試......我總是使用位置絕對的元素，需要放置在另一個元素的頂部，更像是Photoshop上的圖層，我猜。你應該嘗試將絕對位置放在具有相對位置的元素中，然後將其與沒有位置的元素進行比較。 – zalijal

您使用的是自舉3格錯了相同的標記。對於每一行，您必須添加一個row類，並且對於row類中的每個項目，您必須使用類col-*-*。我已經根據您的代碼編寫了一些適當使用引導程序網格的新代碼。

http://jsfiddle.net/DTcHh/29627/

請讓我知道這是不好的，你努力實現，而不是什麼。

來源

2017-02-12 12:55:00 Gijsberts

感謝網格使用建議。但這不是我正在尋找的。 – Danial

Css位置相對/絕對擾亂佈局

回答

相關問題