定位
relative(相对定位)
示例一
示例二
fixed(固定定位)
导航作业
定位
定位方向：left | right | top | bottom
position：定位
relative：相对定位；
z-index：提升元素的层叠顺序；
值(负999---正999)：值越大元素，位置越靠上；
relative(相对定位)
1、相对定位，是从自身出发；
2、它移动位置之后，不会脱标，还占据原来的位置；
示例一
根据案例，可以看出，我们的相对定位是从自身原来的位置出发，也就是如果采用了相对定位，那么它就是相对现在的位置进行偏移；
body {
margin: 0;
padding: 0px;
}
.red,.green {
width: 100px;
height: 100px;
}
.red {
background-color: red;
/*相对定位*/
position: relative;
/*相对此时的自己的位置，偏移50px*/
right: 50px;
}
.green {
background-color: green;
}
示例二
根据案例可以看出，当我们的第一个div左边偏移之后第二个div并没有上来，所以说明固定定位是不会脱标的，还是占据原来的位置；
body {
margin: 0;
padding: 0px;
}
.red,.green {
width: 100px;
height: 100px;
}
.red {
background-color: red;
/*相对定位*/
position: relative;
/*!*相对此时的自己的位置，偏移150px*!*/
left: 150px;
}
.green {
background-color: green;
}
fixed(固定定位)
关于fixed属性，在什么情况下需要用，怎么用，首先，我们应该先了解下fixed属性的说明：fixed总是以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位，通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。
随着浏览器的窗口大小以及拉动条的上下自动变换；
body,ul,li {
margin: 0px;
padding: 0px;
}
.pic {
width: 998px;
margin: 45px auto;
}
.nav {
position: fixed;
left: 0;
top: 0;
}
.left {
position: fixed;
left: 0;
top: 64px;
}
.right {
position: fixed;
right: 0;
top: 64px;
}
导航作业
body,ul,li {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
image {
border: 0px;
}
a {
text-decoration: none;
}
.banner {
width: 600px;
margin: 0 auto;
}
.nav {
height: 32px;
background-image: url("nav_bg.jpg");
}
li {
float: left;
}
a {
display: inline-block;
width: 80px;
height: 32px;
background-image: url("a_bg.jpg");
line-height: 32px;
text-align: center;
}
a:hover {
background-image: url("button2.jpg");
}
扫一扫
3090
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
