ここに解決したい内容を記載してください。
青枠で囲んでいる要素をrelationで基準にして赤枠で囲んでる要素を
top50%; right0; transrate(-50% -50%)で配置してるんですが
幅を縮めたときその位置に来ないんです
または、問題・エラーが起きている画像をここにドラッグアンドドロップ
青枠はbackground-size coverで表示する範囲を制限してます
赤枠は青枠の子要素じゃなく同階層です
ここに問題・エラーに対して試したことを記載してください。
なぜか幅を縮めても右端からの距離が変わらないのが謎です
質問をされる前に,良い質問を書くためのガイドラインやコミュニティガイドラインを,今一度よくお読みください.
実現したい動作や,問題のあるコード,自分で試したことは,回答者が再現できるように明確に書くべきです.
Qiitaはあなたの仕事を,他人に代わりにやらせる場ではありません.投稿者と閲覧者の双方が取り入れやすい形で情報を共有するために,どうかご協力をお願いします.
translateの%が参照するのはその要素の長さなので,赤枠の要素(仮にBとします)が固定長ならば,いたって自然の挙動に見えます.(訂正：ごめんなさい気にしないでください)
写真の縁に連動するように配置したいということであれば,要素の長さを計算して絶対指定するのが手っ取り早い気はします.
.a {
height: 500px;
margin-right: 15%;
background-color:gray;
}
.b {
position:absolute;
right:calc(15% - 350px / 2); /*自要素の半分だけずらす*/
top: calc(500px / 2 - 200px / 2);
width:350px;
height:200px;
background-color: red;
}
relationと書かれておられますがrelativeの間違いでしょうか？
なんとなくrelativeの挙動について誤解されている気もします.
@dddddddddddd
Questioner