• 微信号:Zh-y9213
您当前的位置:爱资源分享网 > > 网站源码 > 网站制作

CSS定位教程 position语法详解

栏目:网站制作时间:2021-11-16 10:25阅读数:49人阅读

CSS中的定位,用position语法方法,定位又分为绝对定位、相对定位和固定定位。

position语法为CSS2版本,无继承性,默认值为:static。

position语法

语法:position:static | relative | absolute | fixed

代码案列

position:static;

取值说明

static:默认无定位。无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。

relative:相对于自身坐标定位。对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。

absolute:相对于上级元素坐标定位。对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。

fixed:固定坐标到页面。对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。IE6及以下不支持此参数值

兼容性

除IE6及更早浏览器不支持position属性的fixed参数值,其他都兼容。

实战案列

效果演示

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>position</title>
    <style>
        #position {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 150px;
    height: 40px;
    padding: 0 10px;
    background: #eee;
}
    </style>
</head>

<body>
    <div id="position">相对于页面的绝对定位方法</div>
</body>

</html>



资源均来自第三方,谨慎下载,前往第三方网站下载

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:737597453@qq.com