CSS系列之定位属性position

559 阅读6分钟

A781E2209F40A6B4131A92EC7DF46328.jpg

前言

最近在学习CSS相关的属性,在此写一篇文章记录一下,以免遗忘的时候,就可以翻翻再次复习了。

v2-51c3e2ddb0dc82c7a7cc6c40ed0a82ed_720w.jpg

在实习的开发需求中,我们通常先要进行静态界面的编写,由于网页的布局已经根据UI设计师的设计,所以拿到的设计图往往遵行页面的美观性、设计性原则,对于页面的大概框架,我们往往可以采用CSSdisplay布局中的flex布局或者grid网格布局,但是除去页面的框架设计,一些小的比较特殊的设计需求如靠着页面主体滑动的广告、或者页面某一模块中固定的按钮就无法单单使用网页布局或者常见的标准流来实现了。这时我们就需要运用到CSS中的一个重要的属性,叫做"定位"。

什么是定位(position)?

定位,大家顾名思义也能轻易地联想到,就是将所需要的组件安放在特定的位置。而严谨一点,在网页中,可以理解为,定位是可以让盒子在某个父盒子内自由地移动位置或者固定在某个位置,并且要能够压住其他的盒子,即不能被页面其他盒子遮挡住。那么,CSS中的定位有哪几种方式呢?请直接看下图~

定位定位模式
static静态定位
relative相对定位
absolute绝对定位
fixed固定定位
sticky粘性定位

显而易见,定位有以上几种属性,当我们要开始设置定位时,语法模式是需要给组件盒子设置定位模式以及偏移的方位,设置盒子偏移方位的属性有4个,分别为topbottomleftright

静态定位 static(了解)

静态定位是position属性中的默认定位值,属于静态定位的标签不会添加任何定位属性,即不受topbottomleftright的影响,同时,元素在页面的最底层属于标准流。

由于静态定位按照标准流摆放位置,和大多数的元素摆放模式相似,所以在完成组件盒子摆放的特殊需求时,静态定位在网页布局时往往很少用到。

相对定位 relative(重要)

相对定位是元素会相对于它的起点即原先的位置进行移动,并且移动的时候,将继续占有原来标准流的位置,后面的盒子不会出现脱标的现象。

可以参考以下案例:

设置定位前👇

image.png

代码:

<style>
    .space_one{
        background-color: aqua;
        height: 100px;
        width: 100px;
    }
    .space_two{
        background-color: blueviolet;
        height: 100px;
        width: 100px;
    }
    .space_three{
        background-color: red;
        height: 100px;
        width: 100px;
    }
</style>

<body>
    <div class='space_one'>方块一</div>
    <div class='space_two'>方块二</div>
    <div class='space_three'>方块三</div>
</body>

设置定位后👇

image.png

代码:

 <style>
    .space_one{
        background-color: aqua;
        height: 100px;
        width: 100px;
    }
    .space_two{
        background-color: blueviolet;
        height: 100px;
        width: 100px;
        position: relative;
        left: 200px;
    }
    .space_three{
        background-color: red;
        height: 100px;
        width: 100px;
    }
</style>
    
<body>
    <div class='space_one'>方块一</div>
    <div class='space_two'>方块二</div>
    <div class='space_three'>方块三</div>
</body>

绝对定位 absolute(重要)

绝对定位是指,当元素在移动位置时,参考点是指它的父元素。

可是,如果没有父元素或者父元素没有定位(默认标准流模式),则元素的绝对定位参考点会以浏览器为定位。如果父元素有定位(相对、绝对、固定定位),则元素会以最近一级有定位的父元素为参考基准移动位置 注意 绝对定位不占有标准流,会出现脱标的现象,即后面以及前面的盒子不会以标准流的形式对待它,会进行占用。

  • 绝对定位会使元素的位置与文档流无关,不占据空间。而相对定位则还处于标准流当中,元素移动的位置是相对于标准流进行移动的

举个栗子🌰:

设置定位前👇

image.png

代码(部分)

<style>
    .space_one{
        background-color: aqua;
        height: 100px;
    }
    .space_two{
        background-color: blueviolet;
        height: 50px;
    }
    .space_three{
        background-color: red;
        height: 100px;
    }
</style>
    
<body>
    <div class='space_one'>方块一</div>
    <div class='space_two'>方块二</div>
    <div class='space_three'>方块三</div>
</body>
    

设置定位后👇

image.png

代码(部分)

<style>
    .space_one{
        background-color: aqua;
        height: 100px;
    }
    .space_two{
        background-color: blueviolet;
        height: 50px;
        position: absolute;
        top:0;
        left: 50%;
    }
    .space_three{
        background-color: red;
        height: 100px;
    }
</style>

<body>
    <div class='space_one'>方块一</div>
    <div class='space_two'>方块二</div>
    <div class='space_three'>方块三</div>
</body>

由于方块二没有父盒子,所以它移动的参考点很明显为浏览器即document文档。

规律:当子盒子是绝对定位的时候,父盒子要用到相对定位。

这是因为当子盒子为绝对定位的时候,有脱标的作用,不占标准流的空间,可以放在父盒子内的任意位置。当父盒子进行布局的时候,必须在标准流中占有位置,所以需要使用相对定位。

固定定位 fixed(重要)

经常上网的朋友肯定对电脑页面中随着网页滑动的小广告不陌生,其实这种“顽固的小广告”也是定位的一种实现案例。这个定位就叫做固定定位(fixed)。

含义:固定定位是元素固定于浏览器可视区的位置。 使用场景:可以在浏览器页面滚动时,元素的位置不会改变, 特点

  • 以浏览器的可视窗口为参照点移动元素
  • 固定定位不再占有原先的位置,也可以看作是一种特殊的绝对定位。

粘性定位(了解)

粘性定位可以被认为是相对定位和固定定位的混合。

特点

  • 以浏览器的可视窗口为参照点移动元素
  • 粘性定位占有原先的定位
  • 必须添加topleftrightbottom其中一个才有效。

是和页面滚动搭配,由于IE浏览器的兼容性太差,最好使用Google浏览器。

总结

根据以上的描述,总结如下:

定位模式是否脱标移动位置是否常用
static静态定位不能使用边偏移很少
relative相对定位否(占有位置)相对于自身位置移动常用
absolute绝对定位是(不占有位置)带有定位的父级常用
fixed固定定位是(不占有位置)浏览器可视区常用
sticky粘性定位否(占有位置)浏览器可视区当前很少

定位叠放次序 z-index

在使用定位布局的时候,可能会出现盒子元素重叠的情况,此时,可以使用z-index来控制盒子的前后次序(z轴)

作用:用来处理叠加在一起的元素,将他们分开。

注意

  • 数值可以是正整数、负整数或0,默认是auto,数值越大,盒子越靠上
  • 数字后面不能加单位
  • 只有有定位的盒子才有z-index属性

如何使用定位让盒子居中?

添加绝对定位的盒子不能通过margin:0 auto水平居中,但是可以通过以下位偏移的计算方法使得盒子水平垂直居中。

初始位置👇

image.png 初始代码

<style>
    body{
        background-color: cornsilk;
    }
    .space_one{
        background-color: aqua;
        height: 100px;
        width: 100px;
    }
</style>

<body>
    <div class='space_one'>方块一</div>
</body>

居中后👇

image.png

居中后代码

<style>
    body{
        background-color: cornsilk;
    }
    .space_one{
        background-color: aqua;
        height: 100px;
        width: 100px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
    }
</style>
<body>
    <div class='space_one'>方块一</div>
</body>