8css定位

来源：互联网发布：各地区区号知乎编辑：程序博客网时间：2024/05/17 23:09

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>8css定位</title>
<link rel="stylesheet" type="text/css" href="8css定位.css">
</head>
<body>

<div id="div4">div4</div>
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
pppppppp
</body>

</html>

------------------------------------------------------------css----------------------------------------------------------------------------------

*{padding:0px;margin:0px}

div{width:300px;height:300px;}

#div1{background:rgba(255,0,0,0.5);
     position:relative;
/*相对定位以原先正常位置为基准，会占据原先的位置*/
   left:150px;
   top:50px;
   /*定义元素左外边界与其包含块上边界之间的偏移，right，top，bottom类似*/
   z-index:2;/*设置层叠顺序*/
   }
#div2{background:rgba(0,255,0,0.5);
      position:absolute;
/*绝对定位以最接近的具有定位设置的父元素为基准，如果父元素都没有定位则以body对象左上角为基准，不会占据原先的位置*/
   left:300px;
z-index:1;/*设置层叠顺序*/
      }
#div3{background:rgba(0,0,255,0.5);

    position:fixed;
    /*绝对定位，相对于浏览器窗口定位，不会随着页面滚动而改变位置*/
    left:400px;
       z-index:3;/*设置层叠顺序*/

#div4{background:black;
float:left;/*设置了float后div4的宽度仅仅是自身的内容加上自身的padding，不再属于父元素*/

}
p{ clear:left}/*清除浮动的影响使p标签另起一行，不再跟在div4右边*/

}

阅读全文

0 0