絕對定位div後的位置內容

Question

我有一個relative定位div，其中包含另外三個absolute定位的div，我將其用作滑塊。定位div的三個absolute中的每一個都包含一個帶有width:100%的圖像。

的問題是，當我想在我的滑塊來定位內容，內容與滑板 [R重疊（因爲div的是絕對的postioned，我不知道實際的高度 - 它改變，因爲圖像寬度是100％）。

如何定位滑塊下的內容？

目前，我正在使用一種javascript函數來檢索圖像的高度，並將該高度作爲底部內容的填充，但我更願意使用純CSS。

可能嗎？ （我寧願不是爲此使用媒體查詢，因爲會有解決的照顧）。

這裏去的代碼：（一活生生的例子檢查此琴：https://jsfiddle.net/g6ppqxLf/5/）

HTML：

<div id="slideshow" class="latime_100"> 

     <img src="poze/sageata_st.png" class="navigare" id="navigare_st" onclick="go_prev();"></img> 

     <div id="slider_1" class="slider" > 

      <img src="http://www.freestockphotos.name/wallpaper-original/wallpapers/download-images-of-gentle-dogs-6866.jpg"></img> 



     </div> 

     <div id="slider_2" class="slider"> 

      <img src="http://3.bp.blogspot.com/-rZmCIp0C-hQ/Tx6aCFeweoI/AAAAAAAAAnQ/WqIEVBTIzRk/s1600/Cool-Tiger-Wallpaper-1920x1080-HD.jpg"></img> 



     </div> 

     <div id="slider_3" class="slider"> 

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwazmPOPcUTK1AmVSPQjH7YLlBywxTpkQi4LEQ40HJOg6_8Qyw"></img> 



     </div> 

     <img src="poze/sageata_dr.png" class="navigare" id="navigare_dr" onclick="go_next();"></img> 
    </div> 

CSS （navigare_st和navigare_dr是滑塊箭頭）：

.slider{ 

    width:100%; 
    position:absolute; 
} 

.slider img{ 

    display: block; 
    margin: 0 auto; 
    width:100%; 

    min-width: 1024px; 

} 

#slideshow{ 


    position: relative; 
    background-color: white; 
    z-index:100; 
} 

#navigare_st{ 

    position: absolute; 
    z-index:1000; 
    left:0px; 
    top:45%; 
    cursor: pointer; 
    width:2.5%; 
} 

#navigare_dr { 
    z-index: 1000; 
    position: absolute; 
    right: 0px; 
    top: 45%; 
    cursor: pointer; 
    width:2.5%; 
} 

Answer 1

我不完全瞭解問題所在。
但是，這裏是我嘗試添加額外的內容到圖片的底部，沒有重疊。

（忽略的JavaScript它僅用於演示）

var curslide = 0; 
 
var elements; 
 

 
$(document).ready(function() { 
 
    elements = $('.slider'); 
 
    elements.hide(); 
 
    elements.first().show(); 
 

 
    $('#navigare_st').click(function() { 
 
    if (curslide > 0) { 
 
     curslide--; 
 
     elements.hide(); 
 
     elements.eq(curslide).show(); 
 
    } 
 
    }); 
 
    $('#navigare_dr').click(function() { 
 
    if (curslide < elements.length) { 
 
     curslide++; 
 
     elements.hide(); 
 
     elements.eq(curslide).show(); 
 
    } 
 
    }); 
 
});

.slider { 
 
    width: 100%; 
 
    //position: absolute; 
 
} 
 
.slider img { 
 
    display: block; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    min-width: 100px; 
 
} 
 
#slideshow { 
 
    position: relative; 
 
    background-color: white; 
 
    z-index: 100; 
 
} 
 
#navigare_st { 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 50px; 
 
    z-index: 1000; 
 
    left: 0px; 
 
    top: 45%; 
 
    cursor: pointer; 
 
    border-radius: 50%; 
 
    background-color: white; 
 
} 
 
#navigare_dr { 
 
    z-index: 1000; 
 
    width: 50px; 
 
    height: 50px; 
 
    position: absolute; 
 
    transform: rotate(180deg); 
 
    right: 0px; 
 
    top: 45%; 
 
    cursor: pointer; 
 
    border-radius: 50%; 
 
    background-color: white; 
 
} 
 
.extra { 
 
    width: 100%; 
 
    height: 50px; 
 
    top: 100%; 
 
    background-color: firebrick; 
 
    border-bottom-left-radius: 15px; 
 
    border-bottom-right-radius: 15px; 
 
    line-height: 24px; 
 
    text-indent: 5px; 
 
    font-size: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slideshow" class="latime_100"> 
 

 
    <img src="https://cdn4.iconfinder.com/data/icons/miu/22/circle_back_arrow-128.png" class="navigare" id="navigare_st" /> 
 

 
    <div id="slider_1" class="slider"> 
 

 
    <img src="http://lorempixel.com/400/200/" /> 
 

 

 

 
    </div> 
 

 
    <div id="slider_2" class="slider"> 
 

 
    <img src="http://lorempixel.com/400/200/sports" /> 
 

 

 

 
    </div> 
 

 
    <div id="slider_3" class="slider"> 
 

 
    <img src="http://lorempixel.com/400/200/food" /> 
 

 
    </div> 
 

 
    <img src="https://cdn4.iconfinder.com/data/icons/miu/22/circle_back_arrow-128.png" class="navigare" id="navigare_dr" /> 
 

 
    <div class="extra"> 
 
    Here comes the extra content? 
 
    </div> 
 
</div>

Answer 2

您不應該爲此任務使用position: absolute。爲什麼？因爲使用position: absolute會從文檔流中移除元素，所以瀏覽器會認爲它們在頁面上不佔用空間。
改爲使用float:left或float:right。它會完成相同的任務，但會導致父div增長以適應內容。

像這樣：

.slider { 
    width:100%; 
    float: left; 
} 

我有你jfiddle的更新版本，顯示它在行動：https://jsfiddle.net/udfjm089/3/

要坦率地說，雖然，除非它本質上是必要的佈局，我不會推薦這個。爲overflow: hidden的包裝div設置固定的高度將看起來更好，並且不會導致您的網頁內容反彈。

Answer 3

使頁面上的元素具有動態高度不是一種好的做法。 要麼嘗試讓圖像具有相同的高度，要麼爲幻燈片容器提供「最高」圖像的高度。

通常，具有淡入淡出效果的幻燈片使用幻燈片的float: left;，然後在最後一張幻燈片後使用clear:both。

但如果你堅持保留該配置，只是想速戰速決，這個代碼就可以了：

$('#slideshow').css('height', $('#slider_'+i+' img').height()); 

複製它的slider_init和go_slide函數中。

親切

Answer 4

如果你只是想堅持用純CSS的解決方案，只是給你的第一個滑塊元素poisition:relative。