position:relative;の影響で、子要素が親要素からはみ出てしまいます。

Question

positionを使った、スライドショーを<div class="split-screen-inner-secondly">
の中に作ったら、position:relative;の影響で<div class="split-screen-inner-secondly">の中身が空と同じ状態になり、スライドショーが<div class="split-screen-inner-secondly">つまり親からはみ出てしまいます。

希望としてはレスポンシブで親ぴったりになってくれたらありがたいです。

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

スライドショーは下記を使わせてもらっています。
http://stand-4u.com/javascript/slideshow.html

その後スライドショーの画像をスライドショーの下においてそれをクリックするとすぐにその画像になるようにする予定です。

position使わないで画像を重ねるしかないでしょうか？
ないしは画像を背景にしてdivを画像分作るしかないでしょうか？

Answer 1

codepenに必要な情報が全然入っていないので想像ですが、#slide、、または#slide imgにmarginが設定されていませんか？
そこにwidth:100%とmarginが設定されている状態で.split-screen-inner-secondlyも100%にされていたらはみ出ます。
position: relativeは相対位置を固定するものであり、全く関係ありません。
よってcodepenにposition: relative; top: 100; left: 100;（単位が入っていないので意味をなしていません）になっていましたが、普通の使い方としては親要素をrelativeで相対的に固定し、その子要素をabsolute（絶対位置。relativeが無ければブラウザ全体を始点とみなします）にし、topやleftなどで配置します。

話を幅の話に戻します。
子要素にmarginを設定するのでなく、親要素（ここでは.split-screen-inner-secondly）にpaddingを設定してください。
その上で#slideを100%にすれば.split-screen-inner-secondlyの値次第でどこまでも大きく、または小さくなります。
なので普通は「画像の元サイズより大きくなったら荒くなったり横幅が大きくなったら高さも高くなっちゃうから」みたいな理由でmax-widthを.split-screen-inner-secondlyに設定します。

レスポンシブにこだわっているようなので、もしPCと見せ方を変えるのであれば横幅のブレークポイントを設定し、メディアクエリをCSS下側に配置してください。

Comments

[退会済みユーザー]

＞＞＞
position:relative;の影響で<div class="split-screen-inner-secondly">の中身が空と同じ状態になり、スライドショーが<div class="split-screen-inner-secondly">つまり親からはみ出てしまいます。

横幅よりもどちらかというと立幅が0になったしまう問題です。

positionを使ったので、その要素がないようにふるまうというのが原因だとはわかっているのですが、レスポンシブでその問題を対処する良い方法はないでしょうか？

jqueryでheightを取得する方法はあると思いますが、マージンなども入るとかなり大変な計算になりますよね。
しかもレスポンシブなので、ifも使わないといけないですし。

[takepieee]

ああ、そういう意味ですね。ありがとうございます。
小要素がabsoluteでheight:autoだと親要素からはみ出るのは当たり前ですね。
まあ私なら$('img').height()で最大高を取得し、あとはmarginとpadding足し算してsplit-screen-inner-secondlyのheightにぶっこみます。

[退会済みユーザー]

やっぱりjqueryを使わないと無理ですね。cssの限界ですね。それを考えてみます。