position stickyとrelative,absoluteを組み合わせたいです
###問題
id{sec-pr}にrelativeを指定し、.blockにstickyを指定して
ぬるっとした動きにしています。
article03をブロークンレイアウトのようにしたく
position:absoluteでくっつけていますが…
どうしても「ブラウザを縦に狭めるとarticle03がarticle02をはみ出してしまい、とても格好悪い」
これを改善したいのですが…
stickyとposition:relative,absoluteは同時に組み合わせることができるのでしょうか。
回答お願いします。
###HTML
<body> <section id="sec-pr"> <div class="block block-one"> <div class="inner"> <article class="article01"> <h1>HELLO WOLRD / HELLO WOLRD</h1> </article> </div> </div><!--end block --> <div class="block block-two"> <div class="inner"> <article class="article03"></article> <article class="article02"> <h1>HELLO WOLRD2 / HELLO WOLRD2</h1> </article> </div> </div> <!--end block --> </section> </body>
#CSS
body{ border: 0; font-size: 100%; font: inherit; margin: 0; padding: 0; vertical-align: baseline; } /*PR*/ #sec-pr{ width: 100%; position: relative; } .block{ width: 100%; height: 100vh; display: flex; position: -webkit-sticky; position: sticky; justify-content: center; top: 50px; } .block-one{ background: #646d7a; z-index: 100; } .block-two{ position: relative; background: #64797a; z-index: 200; } #sec-pr article.article02{ width: 73%; position: absolute; top: 10%; left: 9vw; } #sec-pr .article01{ text-align: center; } #sec-pr .article02{ text-align: left; } #sec-pr .article01 h1{ color: #fff; font-size: 4.2vw; } #sec-pr .article02 h1{ color: #fff; font-size: 4.2vw; } /* ↓ ここがブラウザの高さを狭めると、.block-twoと同時に狭まない。.block-twoからはみ出てしまいます。 */ #sec-pr article.article03{ background: #212E32; padding: 14% 6%; margin: 0 auto; width: 70%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; top: 37%; left: 54vw; } /*end PR*/
回答1件
あなたの回答
tips
プレビュー