高防服务器

CSS定位、CSS的position属性怎么用


CSS定位、CSS的position属性怎么用

发布时间:2022-03-01 12:00:55 来源:高防服务器网 阅读:77 作者:小新 栏目:web开发

这篇文章主要为大家展示了“CSS定位、CSS的position属性怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“CSS定位、CSS的position属性怎么用”这篇文章吧。

 布局的核心是position属性,对元素盒子应用这个属性,可以相对于它在常规文档流中的位置重新定位。position属性有4个值:static、relative、absolute、fixed,默认值为static。

static :默认文档流,正常显示;relative:相对定位;absolute:绝对定位;fixed:固定定位。

HTML代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>定位</title>

<script type="text/javascript" src="demo.js"></script>

<link rel="stylesheet" type="text/css" href="demo.css">

</head>

<body>

<p>1</p>

<p id="p2">2</p>

<p>3</p>

<p>4</p>

</body>

</html>

css:

*{

margin: 0 ;

padding: 0;

}

p{

position: static;

background: #ccc;

margin-bottom: 15px;

}

#p2{

position:relative;

top: 20px;

left: 20px;

}

1 将第二个p元素position属性设为(绝对定位) relative, 设置top和left值:

图示:

发现:第二个段落相对于原来的位置向下和右移动了20px。

结论:绝对定位的元素会相对于原来在文档流中的默认位置进行改变;并且这个元素不会影响其他元素,只是相对于自己原来的位置改变了。

PS:可以给top和left属性设定负值,把元素向上、向左移动。

2 将第二个p元素position的属性改为(相对定位)absolute,设置top和left值:

发现:第二个段落相对于浏览器窗口向下和右,移动了20px。且原来的位置被占据了。

结论:相对定位默认以body为参照物进行定位;并且相对定位已经脱离文档流, margin-bottom: 15px ;失效。

PS:如果给父元素的position属性设置了relative,则以父元素为参照物。如果父元素没有,则看父元素的父元素有没有,如果都没则以body为参照物。

3 将第二个段落position的属性改为(固定定位)fixed,设置top和left值:

发现与绝对定位相似,实际上fixed表示固定在body的某个位置不随页面的滚动而改变。

以上是“CSS定位、CSS的position属性怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注高防服务器网行业资讯频道!

[微信提示:高防服务器能助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

[图文来源于网络,不代表本站立场,如有侵权,请联系高防服务器网删除]
[