2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

position:fixedで親要素に対し右端に固定

Last updated at Posted at 2017-11-15

position:fixedした要素を親要素に対して相対的に配置する方法について、左端に固定というのは見つかったが、右端に固定というケースはなかったので実験しました。


```html
<div class="parents">
  <div class="child">親要素の右端に固定したい!</div>
</div>

左端に固定したい場合は、left:auto;``left:0;などとするといいというのが定説みたいだけど、left:50%;までもなぜか親要素に対して相対的な位置になる模様。それ以上の値になるとブラウザ幅が基準になる。
なのでそれを利用し、left:50%;で半分まで寄せたあとmargin-leftで絶対値を入れて戻す。
レスポンシブの場合は……どうしようか…。

	.parents{
	  width:1000px;
	  margin:0 auto;
	}
	.child{
	  position:fixed;
	  left:50%;
	  marign-left:500px;
	}

Chrome、IE10↑で確認済み。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?