<!DOCTYPE
html>
<
html lang="en">
<
head>
<
meta charset="UTF-8">
<
style>
#left,
#center,
#right{
float:
left;
}
#left{
width:
200px;
height:
200px;
background-color:
#ea2000;
z-index:
-2;
}
#center{
width:
200px;
height:
200px;
background-color:
#ff7300;
position:
relative;
/*position: relative相对定位 占用空间不会给别人*/
top:
20px;
left:
50px;
z-index:
-1;
}
#right{
width:
200px;
height:
200px;
background-color:
aqua;
}
#other{
width:
300px;
height:
300px;
background-color:
#0D0000;
}
</
style>
<
title>
在css中的定位 相对定位</
title>
</
head>
<
body>
<!--
采用相对定位的元素 ： 会相对与他的位置进行定位
并且，元素原始占用 的空间不会被其他的元素占用-->
<!--采用绝对定位的元素：会寻找离他最近的采用了定位的父元素，并以他为坐标进行定位
如果所有的父元素都没有使用定位，则以body为坐标进行定位
并且，元素占用的空间会被其他的元素占用-->
<
div>
<
div style="position:
relative;
top:
100px ;
left:
100px">
<
div>
<
div id="left"></
div>
<
div id="center"></
div>
<
div id="right"></
div>
</
div>
</
div>
<
div id="other"></
div>
</
div>
</
body>
</html>
<!DOCTYPE
html>
<
html lang="en">
<
head>
<
meta charset="UTF-8">
<
style>
#back{
width:
100px;
height:
100px;
background-color:
yellow;
text-align:
center;
line-height:
100px;
position:
fixed;
bottom:
20px;
right:
20px;
z-index:
1000;
}
</
style>
<
title>
固定定位</
title>
</
head>
<
body>
<
div style="height:
1000px">
<
div id="back">
返回页面顶部 </
div>
</
div>
</
body>
</
html>
转载请注明原文地址: https://www.6miu.com/read-66183.html
