前提・実現したいこと
header-listの要素を 右端に固定しながらposition:fixed;で固定したい
floatさせたおなじ要素にposition:fixed;を加えるとliタグが重なってしまい、レイアウトが崩れてしまいます。。
どこに問題があるのでしょうか??
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <link rel="stylesheet" href="damy.css"> 9 <link rel="stylesheet" href="responsive.css"> 10 <title>damy LOUNGE</title> 11 12</head> 13 14<body> 15 <header> 16 17 <div class="head"> 18 19 <div class="header-title"> 20 <h1>visions<br>LOUNGE</br></h1> 21 </div> 22 23 <div class="header-list"> 24 <ul> 25 <li>Parter plant</li> 26 <li>Real marketing</li> 27 <li>Spacerental</li> 28 <li>About</li> 29 </ul> 30 </div> 31 32 </div> 33 34 </header> 35 36</body> 37</html>
css
1*{ 2 list-style: none; 3} 4 5body{ 6 height: 5000px; 7} 8 9/* .head{ 10 position: fixed; 11} */ 12 13.header-title h1{ 14 15 float: left; 16 width: 50% 17} 18 19.header-list ul{ 20 width: 50%; 21 float: right; 22 padding-inline-start:0; 23 24 25} 26 27.header-list li{ 28 29 float: right; 30 position: fixed; 31 32} 33
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/10 07:46