-
①position(五种属性,以及每个属性的特点)
-
②CSS定位—— position绝对定位、相对定位、固定定位
👉👉👉知识点总结任意门:
首先明确知道,position属性配合[top+left](向右下移动)、[top+right](向左下移动)、[bottom+left](向右上移动)、[bottom+right](向左上移动)使用。
一、利用相对定位position: relative;
来完成效果
这个方法跟margin类似,不过margin是通过调整外边距,相对于父元素进行位移;而position: relative;
则是调整相对于原来的位置的距离。
①首先,必须给每个box设置宽高(因为没有padding来填充,无法撑开宽高给父元素),并且设置好边的属性。
②接下来就使用positio: relative;
来使每个子元素相对原位置进行位移
(因为这里是嵌套盒子,所以在不设定位置属性的情况下,如上图所示,可以理解为还是相对于父元素进行的位移,因为上一篇已经清楚了每个盒子间的边距,所以直接写就行了,唯一的差别是,margin: Xpx;
在这里为position: relative; top/bottom: Xpx; left/right:Xpx;
,且偏移前的位置保留不动。注意position要配合方向使用,因为它本身并不指定任何方向)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>盒子练习——相对定位</title>
<style type="text/css">
body{
padding: 0px;
margin: 0px;
}
/*500×500*/
.box1{
border: 5px dotted #000000;
width: 490px;
height: 490px;
}
/*440×440*/
.box2{
border: 5px solid #0000ff;
width: 430px;
height: 430px;
position: relative;
top: 25px;
left: 25px;
}
/*400×400*/
.box3{
background-color: #ffa0df;
width: 400px;
height: 400px;
position: relative;
top: 15px;
left: 15px;
}
/*300×300*/
.box4{
border: 3px dotted #ffffff;
width: 294px;
height: 294px;
position: relative;
top: 50px;
left: 50px;
}
/*280×280*/
.box5{
border: 3px dotted #ffffff;
width: 274px;
height: 274px;
position: relative;
top: 7px;
left: 7px;
}
/*150×150*/
.box6{
border: 5px solid #ffff00;
background-color: #adff2f;
width: 140px;
height: 140px;
position: relative;
top: 62px;
left: 62px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<div class="box4">
<div class="box5">
<div class="box6"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
二、利用绝对定位position: absolute;
来完成效果
position的相对、绝对、固定都是定位属性值。所以position: absolute;参照定位的父元素,可以是position: absolute;
可以是position: relative;
也可以是position: fixed;
①如果想设定position: absolute;
就要知道,它是相对于含定位属性的父元素来进行绝对定位的,如果父元素没有定位属性,那就再往外一个父元素,直到找到含定位属性的父包含块,如果都没有,那就以body为参考定位。
②如果需要相对父元素进行绝对定位,只需给父元素加上position就行了,可以不赋值。
③所以不要忘了这里在最外层的父元素——box1里面设置position,否则box2就相对body定位了。
PS:开发时,只要子元素出现position: absolute;
父元素就必须设position: relative;
不然走位。我这里每层都有定位属性,所以只在最外层设 position: relative; 而已。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>盒子练习——绝对定位</title>
<style type="text/css">
body{
padding: 0px;
margin: 0px;
}
/*500×500*/
.box1{
border: 5px dotted #000000;
width: 490px;
height: 490px;
/*在开发中,如果要使用绝对定位,且不希望参考body,那么它参照的定位元素必须是position: relative*/
position: relative;
}
/*440×440*/
.box2{
border: 5px solid #0000ff;
width: 430px;
height: 430px;
position: absolute;
/*开发时,子元素出现 position: absolute; 父元素就需要设 position: relative; 不然走位,我这里每层都有定位属性,所以只在最外层设 position: relative; 而已*/
top: 25px;
left: 25px;
}
/*400×400*/
.box3{
background-color: #ffa0df;
width: 400px;
height: 400px;
position: absolute;
/*开发时,子元素出现 position: absolute; 父元素就需要设 position: relative; 不然走位,我这里每层都有定位属性,所以只在最外层设 position: relative; 而已*/
top: 15px;
left: 15px;
}
/*300×300*/
.box4{
border: 3px dotted #ffffff;
width: 294px;
height: 294px;
position: absolute;
/*开发时,子元素出现 position: absolute; 父元素就需要设 position: relative; 不然走位,我这里每层都有定位属性,所以只在最外层设 position: relative; 而已*/
top: 50px;
left: 50px;
}
/*280×280*/
.box5{
border: 3px dotted #ffffff;
width: 274px;
height: 274px;
position: absolute;
/*开发时,子元素出现 position: absolute; 父元素就需要设 position: relative; 不然走位,我这里每层都有定位属性,所以只在最外层设 position: relative; 而已*/
top: 7px;
left: 7px;
}
/*150×150*/
.box6{
border: 5px solid #ffff00;
background-color: #adff2f;
width: 140px;
height: 140px;
position: absolute;
top: 62px;
left: 62px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<div class="box4">
<div class="box5">
<div class="box6"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
三、使用牛皮癣大法——固定定位position: fixed;
来完成效果
①什么是牛皮癣?就是那些严重破坏城市形象美观的广告,贴的通街都是,到处都能见到,撕掉又来。那么在html这里差不多,譬如经常浏览网页见到的固定在浏览器某个位置,不受滚动条影响的广告。
②
position: fixed;
只相对浏览器窗口(即body)移动。所以,如果希望用牛皮癣大法完成上图效果,就相当于每个box都要相对body来移动,无论是否嵌入盒子还是平行盒子。
③这里top(前面练习说过,这里是正方形盒子的居中,间距都一样,top=left)的算法,就是把所有间距和边宽都算上,累加,一层加一层,最好先把最外层父元素位置定好,再去设置下一子元素的。
④打个比方,就是手机里面的app以及你外屏上的污渍。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>盒子练习——固定定位</title>
<style type="text/css">
body{
padding: 0px;
margin: 0px;
height: 1000px; /*为了突出固定定位的效果,把高值设多点*/
}
/*500×500*/
.box1{
border: 5px dotted #000000;
width: 490px;
height: 490px;
position: fixed; /*设为固定定位属性,使这个最外框跟着整体一起固定,不设置的话,就会随滚动条跑*/
}
/*440×440*/
.box2{
border: 5px solid #0000ff;
width: 430px;
height: 430px;
position: fixed;
/*间距25*/
top: 30px; /*因为最外box1不做位置挪动处理,相当于0,这里直接 它的间距 + 它的边宽值(border-top-size: 5px;)*/
left: 30px;
}
/*400×400*/
.box3{
background-color: #ffa0df;
width: 400px;
height: 400px;
position: fixed;
/*间距15*/
top: 45px; /*累计相加,它父元素的top值 + 它的间距*/
left: 45px;
}
/*300×300*/
.box4{
border: 3px dotted #ffffff;
width: 294px;
height: 294px;
position: fixed;
/*间距50*/
top: 98px; /*累计相加,它父元素的top值 + 它的间距 + 它的边宽值(border-top-size: 3px;)*/
left: 98px;
}
/*280×280*/
.box5{
border: 3px dotted #ffffff;
width: 274px;
height: 274px;
position: fixed;
/*间距7*/
top: 108px; /*累计相加,它父元素的top值 + 它的间距 + 它的边宽值(border-top-size: 3px;)*/
left: 108px;
}
/*150×150*/
.box6{
border: 5px solid #ffff00;
background-color: #adff2f;
width: 140px;
height: 140px;
position: fixed;
/*间距62*/
top: 170px; /*累计相加,它父元素的top值 + 它的间距 + 它的边宽值(border-top-size: 5px;)*/
left: 170px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<div class="box4">
<div class="box5">
<div class="box6"></div>
</div>
</div>
</div>
</div>
</div>
<p style="background-color:#f39; color:#ffffff;">请看右边滚动条</p>
</body>
</html>