以下の画像の様な感じのサイトを作りたいです。

現在の問題は、「前へ、次へ」がズーム、あるいは縮小すると定位置からずてしまいます。
具体的には、200%時に「前へ」が天井突破、「次へ」がフレームアウト。
50%の時に、「次へ」が右の境界線を突破。

実際に、入れているCSSは、
全体に対して、position: relative;
前へに対して、left: 0; position: abosolute;
次へに対して、right: calc(50%-Xrem); position: abosolute;

お分かりになる方、アドバイスをお願いします。

think49

2015/09/15 04:54

回答者が現象を再現させる為、本現象を再現可能な HTML, CSS を markdown 形式で補足して下さい。もしくは http://jsfiddle.net/ にUPして下さい。

行動規範の内容に同意します

回答3件

予測ではありますが、これは前へボタンと次へボタンを常に上下位置を画面の中央、そして左右位置を画面の右端と左端に表示したいということでよろしいのでしょうか？もしそうならば、次のコードでできます：

全体に対してはCSSコードなしで（position:relativeも必要ない）、
前へに対して{
position:fixed;
top:50%;
left:0;
transform:translate(0,-50%);
-webkit-transform:translate(0,-50%);
}
そして次へに対してはleftをrightに変えただけの
{
position:fixed;
top:50%;
right:0;
transform:translate(0,-50%);
-webkit-transform:translate(0,-50%);
}

でできます。

position:fixedは画面の枠、windowに対して位置を指定するためのコードで、left:0, right:0はそれぞれwindowの左端との距離を０に、右端との距離を０にという意味です。top:50%というのは、前へ、次へボタンの上下の位置を、windowの上端からwindowの５０％分だけ開けろという意味です。これだけでもボタンは中央に来そうなものですが、これだけだと実際は中央よりも少し下に来ています。これを修正するのがそのあとのコードです。transform:translate(0,-50%)というのは左から０、上からその要素の-50%（つまり50%上に）位置をずらせという意味で、これでそれぞれのボタンがお望みの配置へ動いたはずです。最後の-webkit- がついているバージョンは一部のtransformに対応していないブラウザでも正しく表示させるためのコードですので、消さないでください。

投稿2015/09/21 03:36