この css を理解するのはやや困難でした...基本的に、私が欲しいのはこの写真にあるものですが、コンテンツは動的に変化します。
基本的にすべての要素がラッパーに積み上げられ、写真とタイトルが動的に回転し、幅と高さが異なります。
<div id="wrapper">
<div id="title"><h2></div>
<div id="image"><img></div>
<div id="leftbutton" class="but"><img></div>
<div id="rightbutton" class="but"><img></div>
</div>
私が試したことはすべてうまくいきませんでした。これについてどうすればいいですか?
私が得た最も近いものはこれですが、タイトルフィールドは高さを変更できるため、この方法は機能しません。画像を相対的に配置する必要があり、タイトル要素の拡大と縮小に伴って相対的な位置が変化するためです。
#wrapper{
position:relative;
text-align: center;
}
.but{
z-index:20;
position:absolute;
}
#leftbutton{
left:0px;
}
#rightbutton{
right:0px;
}
#title{
z-index: 3;
display: inline-block;
width:auto;
min-width: 80px;
max-width: 340px;
}
#image{
z-index: 1;
position: relative;
top:-21px;
}