下記スライドショーの上にマテリアルアイコンのコントローラーをpositionを使って下中央に配置したいのですが、うまくいきません。

Question

下記スライドショーの上にマテリアルアイコンのコントローラーをpositionを使って下中央に配置したいのですが、うまくいきません。

aaaaaaaaaaaに変更していますがマテリアルアイコンをこちらに変更しています。

<div id="slide">
							<img class="slide__item" src="src="http://placehold.jp/1500x500.png">
							<img class="slide__item" src="http://placehold.jp/1500x500.png">
							<img class="slide__item" src="http://placehold.jp/1500x500.png">
							<div class="controle-btn-wrap u-zindex-most-top">
								aaaaaaaaaaa
							</div>

http://codepen.io/anon/pen/pEXqNg

position: absolute＋bottom;にすれば基準となるrelativeを基準として本来position: absolute＋bottom;が本来配置される位置から下から何ピクセルの位置に配置されるのですよね。なぜか見えないところに行きます。

どのrelativeが基準になっているか確かめる方法などないのでしょうか？

Answer 1

codepenのものの場合、コントローラに当たる文字列の色が白となっており、隠れているように見えているのだと思います。
開発者ツールから要素の位置を確認してみてください。

また、そのようになっている理由は、#slideの中の画像がすべてposition: absolute;で指定しているため、#slideの高さが0になっています。#slideに高さを指定してください。

どのrelativeが基準になっているか

こちらについてですが、absoluteを指定した要素の親で最初にrelativeを指定している要素が基準となりますので、確認してみてください。

Comments

[退会済みユーザー]

//ある要素の高さをある要素と同じ高さにする-768以下
$(window).load(function(){
var parentHeight = $('.slide__item').height();
if($(window).width() < 768) {
$("#slide").height(parentHeight);
}

//ある要素の高さをある要素と同じ高さにする-768以上
var parentHeight = $('.split-screen-inner-secondly').height();
var parentWidth = $('.split-screen-inner-secondly').width();
if($(window).width() > 768) {
$(".slide__item").height(parentHeight).width(parentWidth);
}
})

上記で高さを指定しているのですが、jqueryでの指定は仕様上0と認識されるのですかね。
それは知りませんでした。それで上にしか移動しないように見えたのですね。

[退会済みユーザー]

ありがとうございます。positionで指定したものは高さが０になるのですね。フロートを解除しなかった時とと同じですね。

[退会済みユーザー]

ただ困ったことにレスポンシブなのでスライドショーのボックス、画像は高さを固定できません。
そのため面倒でもjqueryでスライドショーの親要素の高さを取得して指定しています。

cssではそれができないのでどうしてもjqueryで高さを指定しないといけません。

そうすると高さが0になるならどうすればよいのでしょうか？

[退会済みユーザー]

インスペクタデ見てみましたが、#slideの高さが確かにないです。

子要素の画像に高さをjqueryで指定していたので、親も勝手に大きくなると思っていたのですが、
親要素にも子要素と同じ高さをわざわざ指定しないと０になってしまうのですね。

ただこれはpositionが親についている時だけですよね。通常の配置では親のheightは指定しなくても問題は起きないので。