CSS学习笔记(三)

最新推荐文章于 2024-09-23 15:32:37 发布

iteye_13615

最新推荐文章于 2024-09-23 15:32:37 发布

阅读量91

点赞数

本文链接：https://blog.csdn.net/iteye_13615/article/details/81815127

版权

定位

静态定位：意味着内容遵循正常从上到下的HTML流。除非你要使前面一个已经创建的absolute、relative、fixed的定位样式失效，否则你不需要指定static。

固定定位：让HTML元素脱离文档流固定在浏览器的某个位置。固定元素是创建固定工具条或者在只有某种网页滚动的特定比例的地方复制HTML框架效果的好办法。

绝对定位：凡是采用position:absolute；之后，对象便开始进行绝对定位，绝对定位主要通过设置对象的top,right,bottom和left四个方向的边距值来实现。一旦对象被设置绝对定位，它就完全脱离了文档流与浮动模型，独立于其他对象而存在。其中设置对象的z-index属性，可以决定重叠的先后顺序，也是Z轴顺序。

注意：浮动和绝对或者固定的定位不可能同时作用在同一个元素上。

相对定位：相对定位就是浮动定位与绝对定位的扩展方式。相对定位使得被设置元素保持与其原始位置相对，并不破坏其原始位置的信息(其原始的占位信息还存在于文档流及浮动对象之中)。其position属性被设置为：relative；

如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <style type="text/css">
            #a, #b, #c, #d {
                background-color: #eee;
                border: 2px solid #aaa;
                width: 100px;
                height: 100px;
                margin: 2px 2px 2px 0px;
                float: left;
            }
            
            #b {
                position: absolute;
                left: 50px;
                top: 50px;
            }
        </style>
    </head>
    <body>
            <div id="a">
                a
            </div>
            <div id="b">
                b
            </div>
            <div id="c">
                c
            </div>
            <div id="d">
                d
            </div>
    </body>
</html>

不占位的相对定位：

如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <style type="text/css">
        	#divGroup{
        		margin:50px 0 0 50px;
				position:relative;
				border:1px solid #000;
				width:400px;
				height:200px;
        	}
            #a, #b, #c, #d {
                background-color: #eee;
                border: 2px solid #aaa;
                width: 100px;
                height: 100px;
                margin: 2px 2px 2px 0px;
                float: left;
            }
            
            #b {
                position: absolute;
                left: 10px;
                top: 30px;
            }
        </style>
    </head>
    <body>
        <div id="divGroup">
            <div id="a">
                a
            </div>
            <div id="b">
                b
            </div>
            <div id="c">
                c
            </div>
            <div id="d">
                d
            </div>
        </div>
    </body>
</html>

效果：