ページの上部に絶対配置オブジェクトを必要とするデザインがあります。（丸の中のメニュー）
その後、約 5 行後 (基礎を使用)、2 番目の絶対配置要素があります。ただし、その位置は前の要素に基づいていますposition: absolute。これは、1 つの要素に適用すると、通常はそれを他のすべての要素に適用していることに気付くからです。したがって、行がデフォルトで相対的に配置されていても、絶対位置はリセットされないため、要素はページの先頭に浮動しています。
配置はできますが、要素を追加すると CSS を修正しなければならないので、これは良くありません。
絶対位置をリセットするにはどうすればよいですか。2番目の要素の前に要素を静的に配置し、もう1つの要素を絶対に配置しようとしましたが、機能しません。
最初の要素はこの Gistに基づいており、その後のコードは次のようになります。
.or {
position: absolute;
background-image: url(../assets/img/OR.svg);
top: 50%;
left: 50%;
margin: -42px;
width: 84px;
height: 84px;
background-size: 84px 84px;
z-index: 50;
}
HTMLは以上です
<div class="small-6 columns text-center " >
<div class="panel " data-equalizer-watch>
this is the content
</div>
</div>
<div class="or" > OR</div>
<div class="small-6 columns text-center">
<div class="panel" data-equalizer-watch>
this is the content
</div>
</div>
これは Or の部分で、横のコンテンツに関係なく中央に配置する必要があります。これは通常ですが、すべてのページではありません
ありがとう