深入理解position: fixed
程序员文章站
2022-05-28 11:02:46
...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>深入理解position: fixed;</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
#header {
position: fixed;
width: 900px;
height: 100px;
background: red;
top: 0px;
left: 0px;
/*居中办法*/
right: 0px;
margin: 0 auto;
}
#mian {
width: 900px;
height: auto;
background: #000000;
padding-top: 10px;
padding-bottom: 10px;
margin: 100px auto 0px;
}
h1 {
width: 95%;
text-align: center;
color: yellow;
background: blue;
margin: 0px auto 10px;
}
h1:nth-child(2n) {
background: green;
}
h1:last-child {
margin-bottom: 0px;
}
.wbd {
width: 300px;
height: 50px;
line-height: 50px;
border-radius: 10px;
background: green;
text-align: center;
margin-top: 25px;
font-size: 38px;
margin-left: 300px;
box-shadow: 0px 0px 115px blue;
text-shadow: 0px 0px 15px red;
}
</style>
</head>
<body>
<div id="header">
<div class="wbd">我不动</div>
</div>
<div id="mian">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<h1>11</h1>
<h1>12</h1>
<h1>13</h1>
<h1>14</h1>
<h1>15</h1>
<h1>16</h1>
<h1>17</h1>
<h1>18</h1>
<h1>19</h1>
<h1>20</h1>
</div>
</body>
</html>上一篇： CSS深入理解之z-index
下一篇： 记一次ES日志系统的接入