Q&A
コードはマークダウンのコードブロックに入れてください。下記リンク参照。
https://teratail.com/help/question-tips#questionTips3-5-1
前提・実現したいこと
position:fixedで位置指定した、円をアニメーション(scale)で大きくする。
大きくしたときに、親要素のheight,widthの大きさ以外の部分は、見えなくしたい。
子要素にposition:fixedを設定すると、scaleで大きくしたときに、親要素からはみ出た状態になります。
子要素にposition;absoluteに変更すると、大きくしたときでも、親要素からはみ出た部分は見えなくなります。
どちらも、親要素にはposition:relativeは設定しています。
fixedの状態で、解決法はあるでしょうか。。。
該当のソースコード
<style> #box{ overflow: hidden; position: relative; content: ""; width: 250px; height: 2500px; border: 5px solid #000; } #box1{ position: relative; overflow: hidden; content: ""; width: 250px; height: 2500px; border: 5px solid #000; } #ball{ position: fixed; top: 25px; left: auto; margin-left: 50px; width: 100px; height: 100px; border-radius: 50%; background-color: aqua; } #ball1{ position: absolute; top: 25px; left: auto; margin-left: 50px; width: 100px; height: 100px; border-radius: 50%; background-color: aquamarine; } .open{ transform: scale(5); transition: all 6s ease-out; } </style> </head> <body> <div id="box"> <div id="ball"></div> </div> <div id="box1"> <div id="ball1"></div> </div>
回答2件
0
overflow: hidden
;がないです。
投稿2019/12/10 03:05
総合スコア38
0
ベストアンサー
position: fixed;は、ビューポート基準の絶対座標位置に固定となるため、
親要素からは、座標、大きさは独立してしまいます。
よって、親要素にposition: relative;を効かせても、その影響を受けません。
（親要素のoverflow: hidden;も）
一つ、fixedとは挙動が違うので、回答にならないかもしれませんが、
position: sticky;を使うのも手かと。
それでなければ、position: absolute;にし、位置は、JavaScriptにて、スクロールのたびに固定位置に来るようにコントロール、とかです。
投稿2019/12/10 04:44
総合スコア9528
あなたの回答
tips
プレビュー
