質問: positionを使った、スライドショーを の中に作ったら、position:relative;の影響での中身が空と同じ状態になり、スライドショーがつまり親からはみ出てしまいます。 希望としてはレスポンシブで親ぴったりになってくれたらありがたいです。 http://codepen.io/anon/pen/wzkYxX スライドショーは下記を使わせてもらっています。 http://stand-4u.com/javascript/slideshow.html その後スライドショーの画像をスライドショーの下においてそれをクリックするとすぐにその画像になるようにする予定です。 position使わないで画像を重ねるしかないでしょうか? ないしは画像を背景にしてdivを画像分作るしかないでしょうか?
回答: 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下側に配置してください。