親要素に幅指定あり、その中でposition:fixedで右寄せをしたい

前提・実現したいこと

親要素(body)に幅設定があり、
その中でトップバー部分をposition:fixedでスクロール固定、
なおかつ右寄せしたい。

発生している問題・エラーメッセージ

親要素を突き抜けてトップバーが画面の右端に表示されてしまう。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title>test</title>
6		<link rel="stylesheet" href="test1.css">
7	</head>
8	<body>
9		<div id="article">
10	    <header>
11	      <div id="top_bar">
12	        <p>top bar: name icons img</p>
13	      </div>
14	    </header>
15
16			<?php for ($i=0; $i<20; $i++): ?>
17				<p><?php echo ($i); ?></p>
18			<?php endfor ?>
19		</div>
20	</body>
21</html>
22
23

css
1body{
2  width:600px;
3  margin:0 auto;
4}
5#article{
6  background-color: #eee;
7}
8p{
9  color:#333;
10}
11header {
12 width:100%;
13 height:5rem;
14 margin:0 auto;
15 background-color:#f00;
16}
17#top_bar{
18  position:fixed;
19  text-align:right;
20  right:0;
21  top:0;
22	margin:0;
23	background-color: #fff;
24	padding-bottom:0.3rem;
25	border-bottom:1px solid #ccc;
26}
27

試したこと

・right:0;
・headerにheightを設定

補足情報（FW/ツールのバージョンなど）

この赤い部分内にtop barの内容が右寄せで表示されて欲しいのですが
ご覧のように突き抜けてはみ出しています：

求める形：

yambejp

2020/05/25 00:59

固定したいのはheaderですか？それとも#top_barだけですか？

karasumaru

2020/05/26 07:43

#top_barだけです。追記遅れてすみません。ありがとうございました。

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

回答2件

ベストアンサー

下記でどうでしょう。（calcを使わない方法があったような気がしますが、思い出せない(;^ω^)

css
1#top_bar{
2  position:fixed;
3  right: calc((100% - 600px) / 2);
4  top:0;
5    margin:0;
6    background-color: #fff;
7    padding-bottom:0.3rem;
8    border-bottom:1px solid #ccc;
9}

flexを使えばいいか。

css
1header {
2 width:100%;
3 height:5rem;
4 margin:0 auto;
5 background-color:#f00;
6  display: flex;
7  justify-content: flex-end;
8}
9#top_bar{
10  position:fixed;
11  top:0;
12    margin:0;
13    background-color: #fff;
14    padding-bottom:0.3rem;
15    border-bottom:1px solid #ccc;
16}

投稿2020/05/25 01:13

編集2020/05/25 01:28

hatena19

総合スコア33692

karasumaru

2020/05/26 07:41

justify-content: flex-end;！ありがとうございます！！

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

ちょっと裏技っぽいですが。

サンプル

css
1header {
2 width:100%;
3 height:5rem;
4 margin:0 auto;
5 background-color:#f00;
6 direction: rtl; /* 追加 */
7}
8#top_bar{
9  position:fixed;
10  text-align:right;
11  /* right:0;  削除 */
12  top:0;
13    margin:0;
14    background-color: #fff;
15    padding-bottom:0.3rem;
16    border-bottom:1px solid #ccc;
17}