divポジショニング：絶対、相対、など

Question

私は、下にテキストを配置したい（margin:auto）純粋なCSSイメージスライダを持っています。スライダ画像は積み重ねられると絶対的に配置されます。私はそれの周りにdivsを配置する方法を把握することはできません。私は相対的な位置のコンテンツとラッパーdivを持っています。イメージのサイズは応答性があり（したがってmax-width:100%）、ラッパーまたはコンテンツのdivは正確なサイズにすることができます。それとも、どちらにする必要はないでしょうか？

これは私が後だものです：

そして、これは私がこれまで管理するものである：www.jsfiddle.net/1qxxnxbf/1/

Answer 1

自分のイメージスライダーがカルーセルの場合は、JSのない、それが応答することはできません。スライダーにCSSの高さを指定すると、jsで調整して反応させることができます。

あなたができる唯一のことは、縦横比を維持することです。したがって、あなたの例では350x220の画像があります。そのため、.sliderクラスのpadding-bottomを62.857％（約220/350）にすると、その幅に基づいて可変の高さが得られます。幅が拡大/縮小すると、高さも増加/縮小します。

http://jsfiddle.net/1qxxnxbf/2/

編集：私はちょうどスライダーの周りにあなたのコードのどれも応答しないことに気づきました。なぜスライダーを反応させようとしていますか？

Answer 2

チェックアウトは、この設計

https://jsfiddle.net/jalayoza/zvy87dcv/9/

HTMLコード

<div class="content">content 

    <div class="wrapper">wrapper 

    <div class="slider"> 
     <img src="https://placeimg.com/350/220/any" class="slide" alt="slide1"> 
     <img src="https://placeimg.com/350/220/nature" class="slide" alt="slide2"> 
     <img src="https://placeimg.com/350/220/abstract" class="slide" alt="slide3"> 
    </div> 

    <!-- text should go underneath the image --> 
    <div class="text"> 
     <div class="text_left"> 
     left text 
     </div> 
     <div class="text_right"> 
     right text 
     </div> 
    </div> 

    </div> 

</div> 

CSSコード

.content { 
    width: 500px; 
    background: #fff; 
    margin: auto; 
} 

.wrapper { 
    max-width: 400px; 
    position: relative; 
    background: purple; 
    margin: auto; 
    padding:10px; 
} 

.slider { 
    margin: auto; 
    left: 0; 
    right: 0; 
    max-width: 100%; 
    position: relative; 
    padding-bottom: 62.857%; 
} 

.slide { 
    max-width: 400px; 
    margin: auto; 
    position: absolute; 
    opacity: 0.5; 
    width: 100%; 
} 

.text { 
    max-width: 100%; 
    position: absolute; 
    background: transperant; 
    opacity: 0.9; 
    bottom:10px; 
    width: 95%; 
} 

.text_left { 
    max-width: 50%; 
    background: #fff; 
    float: left; 
    text-align: left; 
    padding:5px; 
} 

.text_right { 
    max-width: 50%; 
    background: #fff; 
    float: right; 
    text-align: right; 
    padding:5px; 
} 

は、あなたがポジションを使用しないでください。この設計