css-定位position的学习心得

css-定位position的学习心得

从头开始学习前端,在学习CSS的过程中,慢慢挖掘出小知识,特此给大家分享下。
首先我们来聊聊CSS中的position这个属性,position一般是用来对元素进行定位,以便于更好的在页面中进行布局。
position有5个属性值:static、relative、absolute、fixed、stisky

  • static
    静态定位,是position的默认值。

  • relative
    相对定位,参照元素自身在文档的原始位置进行定位,不会脱离文档流,但会占据空间。

  • absolute
    绝对定位,参照已经定位的父元素的位置进行定位,如果父元素没有定位就参照文档元素,例如html、body。会脱离文档流,并且不占据空间。

  • fixed
    固定定位,参照浏览器窗口进行定位,会脱离文档流

  • sticky
    粘性定位,特点是当页面没有滚动条的时候,执行的是position:relative;
    如果页面产生滚动条,执行的是position:fixed;一般用来做吸顶效果的应用。

应用:如何用定位实现一个元素在父元素内上下左右居中
1.简单粗暴型,不需要计算元素的宽高
父元素:
position:relative;
子元素:
position:absolute; left:0;bottom:0;left:0;right:0; margin:auto;
2.稍微复杂型,需要计算元素的宽高
父元素:
position:relative;
子元素:
position:absolute; left:50%;top:50%; margin-left:-元素宽的一半; margin-top:-元素高的一半;
注:- 这个符号别漏写了。

发布了10 篇原创文章 · 获赞 6 · 访问量 324

猜你喜欢

转载自blog.csdn.net/qq_44993284/article/details/96888966
今日推荐