定位问题 绝对和相对。

|--相对定位参考物是相对于这个div 本身

|--绝对定位是基于某个参考物的位置进行的绝对定位： 层层上找父元素

　　|--该元素如果父元素没有找到顶 直接相对于 body

　　|--该元素有父元素 父元素且是相对自身定位 position:relative; 有这个属性 则定位是相对父元素的绝对定位

　　　 |-- 绝对定位如何区分谁覆盖谁？ 定位层级：  z-index;

 

relative相对定位

#t1 {
background: red;
position: relative;
top: 30px;
left:20px;
}

那就是t1相对于自己原来的位置向（上下左右）移动，其它元素的位置不变
可以用相对定位来完成 -> 相对自己原来的位置
position:relative; -> 告诉元素相对于自己的位置移动
那怎么动?动多少? -> top,right,bottom,left [相对于自己的上下左右四条边移动多少]

 

 

relative - absolute 相对父元素的绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
}
    body {
        margin:0; padding:0;

    }
    #t1{
        background: red;
        position:absolute;
        top:20px;
        left:20px;
    }

    #t0{
        border:1px dotted green;
        margin-top: 40px;
        position:relative;
    }
</style>
</head>
<body>
<!-- <h1>绝对定位</h1> -->
<div id= "t0"> 
    <div id="t1"></div>
</div>

<div id="t2"></div>
<div id="t3"></div>
</body>
</html>


 

z-index 轴距视觉定位

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
}
#t1 {
background: red;
position:absolute;
top:0px;
left:0px;
z-index:1;
}
#t2 {
background: blue;
position: absolute;
top:100px;
left:100px;
}

</style>
</head>
<body>
<h1>绝对定位 z-index</h1>
<div id="t1"></div>
<div id="t2"></div>
</body>
</html>

 

posted @ 2017-04-09 00:21  silvercell  阅读(898)  评论(0)    收藏  举报