定位position
定位分为四种：相对定位 relative，绝对定位 absolute，固定定位 fixed，没有定位 static。
relative：不脱离文档流，提升层级，一般作为父级元素，为子级元素的定位提供参考范围。
absolute：脱离文档流，提升层级，一般作为子级元素。
fixed：针对于窗口进行定位，脱离文档流，提升层级。加入针对body做固定定位。无论鼠标怎么滚动，肉眼观察被定为的元素，位置都是不变的。
注意点：不管是那种定位，子级元素的位置都是针对于父级元素来定的。在实际开发中，子级元素需要定位，父级元素一般也会有定位。
定位的扩展样式：left,right,top,bottom
固定定位样式展示（不常用，只看效果）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相对定位</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 6.25rem;
}
#box1{
background: yellow;
}
#box2{
background: green;
/* 测试绝对定位 */
position: fixed;
right: 0px;
top: 0px;
}
#box3{
background: blue;
}
</style>
</head>
<body>
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="">哈哈哈哈</div>
<div id="">哈哈哈哈</div>
<div id="">哈哈哈哈</div>
<div id="">哈哈哈哈</div>
<div id="">哈哈哈哈</div>
<div id="">哈哈哈哈</div>
<div id="">哈哈哈哈</div>
<div id="">哈哈哈哈</div>
<div id="">哈哈哈哈</div>
<div id="">哈哈哈哈</div>
<div id="">哈哈哈哈</div>
<div id="">哈哈哈哈</div>
<div id="">哈哈哈哈</div>
<div id="">哈哈哈哈</div>
<div id="">哈哈哈哈</div>
<div id="">哈哈哈哈</div>
</body>
</html>
初始效果图
滑动效果图
浮动加定位练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#nav {
height: 50px;
background: #D5D5D5;
}
#secnav {
height: 150px;
width: 1000px;
background: brown;
margin: 5px auto;
}
#content {
width: 1000px;
margin: 0 auto;
}
#content .center,
#content .right,
#content .left {
width: 350px;
float: left;
height: 400px;
}
#content .left {
width: 300px;
background: red;
}
#content .right {
background: blue;
}
#content .center {
background: green;
position: relative;
}
.img_fir,
.img_sec {
width: 100px;
height: 100px;
background: pink;
position: absolute;
}
.img_fir {
left: 50px;
top: 80px;
}
.img_sec {
left: 50px;
top: 200px;
}
p.p1 {
position: absolute;
left: 200px;
top: 220px;
}
p.p2 {
position: absolute;
left: 200px;
top: 120px;
}
</style>
</head>
<body>
<div id="nav">
</div>
<div id="secnav">
</div>
<div id="content">
<div class="left">
</div>
<div class="center">
<div class="img_fir">
</div>
<div class="img_sec">
</div>
<p class="p1">这是第一段文字</p>
<p class="p2">这是第二段文字</p>
</div>
<div class="right">
</div>
</div>
</body>
</html>
利用z-index提升层级，模拟box-shadow渲染边框
<html>
<head>
<meta charset="utf-8">
<title>做阴影</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
position: relative;
}
.p1{
width: 100px;
height: 100px;
border: 1px blue solid;
position: absolute;
background: #fff;
}
.p2{
width: 100px;
height: 100px;
border: 1px blue #000;
position: absolute;
left:8px ;
top: 8px;
background: #000;
opacity: 0.6;
/* z-index提升或降低层级 */
z-index: -100;
}
</style>
</head>
<body>
<div id="box">
<div class="p1">
</div>
<div class="p2">
</div>
</div>
</body>
</html>
透明度使用存在问题
在同一标签下，设置背景样式和文字样式，又设置该标签的opcity。会导致文字和背景颜色一起变透明。
解决方式：背景和文字做成两个兄弟标签，通过定位将文字所在的标签放在背景所在的标签上，给背景所在的标签添加透明度。
溢出 overflow
属性：auto（如果超出会出现滑动条），hidden（如果超出会隐藏超出部分）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 1px red solid;
overflow: auto;
/* 超出部分隐藏
overflow: hidden; */
}
</style>
</head>
<body>
<div id="">
dwahuiodhoiwajdpwdwadwadw
的户外哦好多我
等你哦按地往哪
给你陪你玩披肩发陪我就
但我买票就没跌破挖坑吗
的户外哦好多我
等你哦按地往哪
给你陪你玩披肩发陪我就
但我买票就没跌破挖坑吗
的户外哦好多我
等你哦按地往哪
给你陪你玩披肩发陪我就
但我买票就没跌破挖坑吗
的户外哦好多我
等你哦按地往哪
给你陪你玩披肩发陪我就
但我买票就没跌破挖坑吗
的户外哦好多我
等你哦按地往哪
给你陪你玩披肩发陪我就
但我买票就没跌破挖坑吗
</div>
</body>
</html>
小知识点补充：当设置好能容纳两个图片的标签宽高后，将两张图片放在其中，会出现放不下的情况。因为html中两个文字之间的距离，或者图片间的距离并不是0。因此需要初始化body标签或需要容纳两张图片的标签设置font-size为0!!!
网友评论