CSS中的四种定位方式-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS中的四种定位方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在CSS中定位有以下4种：
静态定位 - static
相对定位 - relative
绝对定位 - absolute
固定定位 - fixed

静态定位 - static

静态定位是css中的默认定位方式，也就是没有定位。在此定位方式中设置：top，bottom，left，right，z-index 这些属性都是无效的。

相对定位 - relative

	<style>
        div{
            position: relative;
            background-color: red;
            border-top:1px solid #000  
        	}
    </style>

相对位置前的位置：
CSS中的四种定位方式

	 <style>
        div{
            position: relative;
            background-color: red;
            border-top:1px solid #000;
            top: 30px;
	        left: 30px;
        	}
    </style>

相对位置后的位置：
CSS中的四种定位方式
可以看到该元素向右下各偏移了30px.
相对定位的特点就是元素本身在文档流中的占位不变，无形的东西就是B元素在文档流中的占位，这也是为什么C元素不会浮动过去的原因。可以想象成B元素的本体依然处于普通文档流中，它的替身在参照本体进行移动。

绝对定位 - absolute

绝对定位是参考父元素的相对定位来实现的：

 #A{
            position: relative;
            background-color: red;
            border-top:1px solid #000;
            height: 300px;
            width: 300px;
            /* left: 30px;
            top: 30px; */
        }
        #B{
            position: absolute;
            background-color: rgb(17, 255, 0);
            border-top:1px solid #000;
            height: 100px;
            width: 100px;
            left: 30px;
            top: 30px;
        }

CSS中的四种定位方式

可以看出绿色div是以红色为定位位移30px，为了验证他是以父级进行定位，我们改变父级的位置：

 #A{
            position: relative;
            background-color: red;
            border-top:1px solid #000;
            height: 300px;
            width: 300px;
            left: 30px;
            top: 30px;
        }
        #B{
            position: absolute;
            background-color: rgb(17, 255, 0);
            border-top:1px solid #000;
            height: 100px;
            width: 100px;
            left: 30px;
            top: 30px;
        }

CSS中的四种定位方式
可以看出，B是以父级为参照进行定位，如果所有父级都没有设置相对定位，那么它将根据根元素html进行偏移。

固定定位 - fixed

固定定位比较简单，固定定位是参照浏览器窗口的左上角进行偏移。
固定定位的特点就是：无论如何滑动页面，固定定位的元素位置都不会被改变，完全脱离文档流。
另外，如果设置了固定定位的元素也设置了width或height的百分比值，那么此百分比的值是参照窗口宽高来计算的。
z-index属性：
z-index属性是设置元素的层级，数值低的会被数值高的遮住。文章来源地址https://www.toymoban.com/news/detail-475130.html

到了这里，关于CSS中的四种定位方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！