良许Linux教程网 干货合集 CSS中常见的定位方法

CSS中常见的定位方法

CSS中的定位使用来布局的熟练应用对页面美化有很好的帮助,下面为大家详细讲解一下CSS定位

CSS中定位有四种在不同的场景下有不同的作用下面我就大体的介绍一下这四种定位。 static静态定位:应用的场景不多,这里不做介绍,下面主要介绍一下其他三种常见的定位。

image-20220211134842459
1. position:relative相对定位

顾名思义,相对定位就是相对于原来自己的位置做出对应的变化, 需要注意的是 :元素移动后会占有原来的位置(这是relative定位最为重要的一点)

下面为代码演示部分:

这里定义了三个div并给了相应的颜色,运行结果如下

CSS定位简介CSS定位简介

当给子盒子如下定位属性时

.purple {
          position: relative;
          top: 0;
          left: 80px;
          /* 上面给这个盒子添加了相对定位,
          并让它相对原来的自己移动了80px的距离 */
          width: 80px;
          height: 80px;
          background-color: purple;
      }
CSS定位简介CSS定位简介

页面变成了这样,这也验证了最重要的一点—元素移动后会占有原来的位置 否则绿色的盒子就会顶上去

2. ponsition:absolute绝对定位

绝对定位是以自己父级元素做出的位置改变,如果父级元素有position属性,以父级元素为基准做出相应的移动,如果父级元素没有position属性(或者没有父级元素),以浏览器为基准做出相应的移动. 需要注意的是 :元素移动后不会占有原来的位置. 下面为代码演示

.purple {
           position: absolute;
           top: 160;
           left: 80px;
           /* 这里的紫色盒子没有父级元素
           所以是以浏览器为基准的定位 */
           width: 80px;
           height: 80px;
           background-color: purple;
       }
CSS定位简介CSS定位简介

显然绿色盒子顶了上去,这个结果就验证了绝对定位:元素移动后不会占有原来的位置.

3. fixed固定定位

固定定位的位置是相对于整个页面的位置,与是否有父级元素无关,同样,固定定位也不会保留位置

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

img
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部