01.绝对定位absolute
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
margin: 0;
}
div{
width: 100px;
height: 100px;
}
#box1{
background: yellow;
}
#box2{
background: green;
position: absolute;
left:100px;
}
#box3{
background: blue;
}
</style>
</head>
<body>
<!--
定位：
绝对定位：absolute ：父级没有定位时，相对文档定位，脱离文档流提升层级
相对定位：relative
固定定位：fixed
-----------------
没有（默认）定位：static
只要有定位，就可以使用扩展样式
left right
top bottom
-->
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>
02.相对定位relative
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
margin: 0;
}
div{
width: 100px;
height: 100px;
}
#box1{
background: yellow;
}
#box2{
background: green;
position: relative;
left:100px;
}
#box3{
background: blue;
}
</style>
</head>
<body>
<!--
定位：
绝对定位：absolute ：父级没有定位时，相对文档定位，脱离文档流提升层级
相对定位：relative ：相对自己的定位，不脱离文档流，提升层级
固定定位：fixed ：
-----------------
没有（默认）定位：static
只要有定位，就可以使用扩展样式
left right
top bottom
-->
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>
03.固定定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
margin: 0;
}
div{
width: 100px;
height: 100px;
}
#box1{
background: yellow;
}
#box2{
background: green;
position: relative;
left:100px;
}
#box3{
background: blue;
}
</style>
</head>
<body>
<!--
定位：
绝对定位：absolute ：父级没有定位时，相对文档定位，脱离文档流提升层级
相对定位：relative ：相对自己的定位，不脱离文档流，提升层级
固定定位：fixed ：针对窗口定位，脱离文档流，提升层级
-----------------
没有（默认）定位：static
只要有定位，就可以使用扩展样式
left right
top bottom
-->
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>
04.有父级的定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 960px;
height: 400px;
background: #0000FF;
margin: 0 auto;
/* 让子集元素针对自己定位 */
position: relative;
}
#div1{
width: 80px;
height: 80px;
background: green;
position: absolute;
left: 300px;
}
#div2{
width: 80px;
height: 80px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<!--
如果父级有定位
绝对定位的子集元素都是针对父级在定位
-->
<div id="box">
<div id="div1"></div>
<div id="div2"></div>
</div>
</body>
</html>
05.z轴-index
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
position: relative;
}
#div1{
width: 100px;
height: 100px;
border: 1px solid deepskyblue;
position: absolute;
background: red;
z-index: 1;
font-weight: bold;
opacity: 0.4;
}
#div2{
width: 100px;
height: 100px;
background: #000;
position: absolute;
left:8px;
top: 8px;
z-index: -10;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="box">
<div id="div1">法国法国是</div>
<div id="div2"></div>
</div>
</body>
</html>
06.溢出overflow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 100px;
border: 1px solid red;
overflow: auto;
overflow: hidden;
}
</style>
</head>
<body>
<div>女裤女靴子绿领巾的攻击体魄大放大放大腐蚀毒粉阿瑟 挖土机颇强条狗咯刚看了你这卡里现在；垃圾狗滚咯破乳剂跳舞机公开栏女考虑现在你不考虑；自己内心的来看； </div>
</body>
</html>
当当图书网（作业）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
font-size: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
img{
border:0;
}
#logo,#nav{
width: 960px;
margin: 3px auto;
}
#nav .main{
width: 100%;
background: url(image/menuBg.jpg) ;
}
#nav{
position: relative;
}
#nav .main li{
float: left;
height: 36px;
line-height: 36px;
}
#nav .main li a{
font-size: 12px;
color: #fff;
font-family: Verdana,"宋体";
margin: 0 16px;
}
#nav .extra{
width: 248px;
position: absolute;
right: 0;
top: -30px;
background: #eafffa;
border: 1px solid #c8ece3;
border-bottom: 0;
}
#nav .extra li{
margin:0 10px;
float: left;
background: #eafffa;
}
#nav .extra li a{
line-height: 29px;
font-size: 12px;
color: #7b7b7b;
}
#nav .szfq{
position: absolute;
top: -42px;
right: 194px;
}
</style>
</head>
<body>
<div id="logo">
<img src="image/logo.jpg" >
</div>
<div id="nav">
<ul class="main">
<li><a href="">首页</a></li>
<li><a href="">图书</a></li>
<li><a href="">音像</a></li>
<li><a href="">童装</a></li>
<li><a href="">服装</a></li>
<li><a href="">鞋靴</a></li>
<li><a href="">运动</a></li>
<li><a href="">箱包</a></li>
<li><a href="">美妆</a></li>
<li><a href="">珠宝</a></li>
<li><a href="">家居</a></li>
<li><a href="">食品</a></li>
<li><a href="">酒</a></li>
<li><a href="">手机</a></li>
<li><a href="">数码</a></li>
<li><a href="">电脑</a></li>
<li><a href="">家电</a></li>
<div style="clear:both;"></div>
</ul>
<ul class="extra">
<li><a href="">尾品汇</a></li>
<li><a href="">当当优品</a></li>
<li><a href="">数字馆</a></li>
<li><a href="">都看阅器</a></li>
<div style="clear:both;"></div>
</ul>
<div class="szfq">
<img src="image/icon_count.png" alt="">
</div>
</div>
</body>
</html>
fly社区（作业）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
list-style: none;
}
p{
line-height: 0;
}
body{
background: #f2f2f2;
}
a{
text-decoration: none;
}
#nav{
line-height: 50px;
width: 640px;
background: #ffffff;
border-radius: 3px;
}
#nav .title{
font-size: 14px;
text-indent: 23px;
font-family: "微软雅黑";
color: #666666;
}
#nav .sub{
height: 75px;
border-top: 1px dashed #e9e9e9;
}
img{
margin: 15px;
height: 45px;
width: 45px;
}
#nav .hangone{
}
#nav .hangtwo{
}
.sub{
position: relative;
}
.taolun{
line-height: 13px;
font-size: 12px;
position: absolute;
top: 0px;
left: 00px;
}
</style>
</head>
<body>
<div id="zhiding">
<ul id="nav">
<li class="title">置顶</li>
<li class="sub"><img src="../../../20190401/bitbug_favicon.ico" alt="">
<span class="taolun">讨论</span>
<a href="javascript:;">鞠婧祎的白蛇传好好看</a>
<span class="jingtie">精帖</span>
<a href="javascript:;">姜政</a>
<span class="vip">VIP3</span>
<span class="date">2019-3-3</span>
<span class="feiwen">悬赏飞吻</span>
<span class="huida">回答</span>
</li>
<li class="sub"><img src="../../../20190401/bitbug_favicon.ico" alt=""></li>
<li class="sub"><img src="../../../20190401/bitbug_favicon.ico" alt=""></li>
</ul>
</div>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
