クリエイター：コーディング備忘録ブログ

RSS

コーディング

position:fixedで、左端を親要素基準にするポイント

2018.01.25

親要素にwidthを指定してmargin:0 autoで中央寄せにした後、
子要素にposition:fixed、left:autoを指定するだけです。

■html
<body>
    <div id="box">
        <p id="inner">テキスト</p>
    </div>
</body>

■css
#box{
width:300px;
height:250px;
margin:0 auto;
padding:0;
}
 
#inner{
width:20px;
height:50px;
position:fixed;
left:auto;
top:0;
margin:0 0 0 900px;
padding:0;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

■html

<body>

<div id="box">

<p id="inner">テキスト</p>

</div>

</body>

■css

#box{

width:300px;

height:250px;

margin:0 auto;

padding:0;

}

#inner{

width:20px;

height:50px;

position:fixed;

left:auto;

top:0;

margin:0 0 0 900px;

padding:0;

}

この記事を見た人は次の記事も見ています。

フォントのレタープレス表現

前の記事

WordPressのスラッグで動的にCSSを変更

次の記事

コメント

0 コメント
0 トラックバック

この記事へのコメントはありません。

最近の投稿

アーカイブ

RELATED

コーディング

Dreamweaverの検索置換の小技

2017.12.01

コーディング

Word Pressでページ送りの際にうまくいかない場合

2018.02.08

コーディング

IE8で:beforeなど疑似要素が適用されない場合

2018.01.05

コーディング

slickでスライダー画像部分とテキストの切り離し

2019.05.21

コーディング

bxslider 両サイドに前後の画像を表示させる方法

2017.03.27

コーディング

インスタグラムの画像を保存する

2021.06.25