CSS 相对定位与绝对定位

来源：互联网发布：中国科技成果数据库编辑：程序博客网时间：2024/06/05 18:51

参考：CSS
1）相对定位
2）绝对定位
3）固定定位
4）重叠元素的堆叠顺序设置

使用相对定位与绝对等功能可以对页面元素进行更灵活的定位！
1.相对定位
position:relative;
left:;
right:;
top:;
bottom:;
为元素设置相对定位之后，元素依然会占据原来的空间，依然在标准流中！
2.绝对定位
position:absolute;
left:;
right:;
top:;
bottom:;
为元素设置绝对定位之后，元素不会占据原来的空间，脱离了原来的队伍！
3.固定定位
position:fixed;
left:;
right:;
top:;
bottom:;
相对于浏览器的窗口进行定位
4.重叠元素的堆叠顺序设置
使用 z-index:;对设置了相对或绝对或固定定位的元素进行堆叠顺序的设置，设置的数值越
大即堆叠在越上层，该属性可以是负值。

这里写图片描述

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8" /><title>第四章 用CSS给网页装潢[7] -相对定位与绝对定位</title><style type="text/css">body {    height:2000px;}#div1 {    width:100px;    height:100px;    background:#FFCC00;    position:absolute;    left:30px;    top:10px;    z-index:1;    /*        position:relative;        相对于原来的位置进行定位（偏移）        left与right也只能用一个        top与bottom也只能用一个        position:relative;        left:20px;        right:20px;        top:30px;    */}#div2 {    width:100px;    height:100px;    background:#6633FF;    position:absolute;    top:10px;    z-index:-2;    /*    position:absolute;    left:20px;    top:10px;    */}#div3 {    width:100px;    height:100px;    background:#66FFCC;    /*    position:fixed;    固定定位ie6不能实现，不兼容    */    left:20px;    top:10px;}</style></head><body><div id="div1">div1</div><div id="div2">div2</div><!--<div id="div3">div3</div>-></body></html>

阅读全文

0 0