写点什么

Vue 进阶(幺肆贰):CSS- 静态定位,相对定位,绝对定位,固定定位的用法和区别详解

发布于: 刚刚
Vue进阶(幺肆贰):CSS-静态定位,相对定位,绝对定位,固定定位的用法和区别详解

一、前言

CSS 提供了三种基本的定位机制:普通流浮动固定定位;通过这三种方式可实现页面的排版布局。

二、普通流

普通流中元素的位置由元素在 (X)HTML 中的位置决定:


  • 块级元素独自占一行,在文本流中从上到下一个接一个地排列;

  • 行内元素在一行中并排排列,遇到父元素的边沿会换行继续排列;

三、浮动

  • 浮动会让元素脱离标准文档流,不再占原来的空间,可以让多个块级元素并排显示。

四、固定定位

固定定位是将元素定在某个位置,定位元素的层级要高于浮动元素;


通过定位可以让元素相对于其正常位置进行偏移出现在别的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置;


定位可以将元素放置在页面中的任何位置,这是标准文档流浮动无法实现的。


CSS 通过 position 属性设置定位方式,其对应的属性值如下:



绝对定位固定定位会改变元素的 display 属性,默认将元素转为行内块元素。

五、static 静态定位

按照标准文档流的规则来放置元素,基本不用;

六、relative 相对定位

相对于自己在标准文档流中的位置进行定位;原来的位置仍占有空间;


相对定位示例:


/* 父元素 */.parent {  width: 400px;  height: 400px;  border: 1px solid gray;}/* 两个子元素 */.box1,.box2 {  width: 200px;  height: 200px;}.box1 {  /* 设置相对定位 */  position: relative;  /* 相对元素原来的位置距离上边缘 50px */  top: 50px;  /* 相对于原来的位置距左边缘 100px */  left: 100px;  background-color: green;}.box2 {  background-color: blue;}
复制代码


<div class="parent">  <div class="box1"></div>  <div class="box2"></div></div>
复制代码


七、absolute 绝对定位

通过设置定位的父级元素或祖先元素来进行定位:


  • 如果父元素或祖先元素没有定位则相对于页面文档进行定位;

  • 绝对定位的元素脱离标准文档流,不再占有原来的位置;

  • 使用绝对定位的元素父元素一般设置为相对定位;


绝对定位示例:


/* 父元素 */.parent {  width: 400px;  height: 400px;  /* 父元素设置相对定位 */  position: relative;  border: 1px solid gray;}/* 两个子元素 */.box1,.box2 {  width: 200px;  height: 200px;}.box1 {  background-color: red;}.box2 {  /* 设置绝对定位 */  position: absolute;  /* 距离父元素上边缘 50px */  top: 50px;  /* 距离父元素左边缘 100px */  left: 100px;  background-color: purple;}
复制代码


<div class="parent">  <div class="box1"></div>  <div class="box2"></div></div>
复制代码


八、fixed 固定定位

  • 相对于浏览器可视窗口进行定位,位置与父元素无关;

  • 会将元素固定在窗口的某个位置不随页面的滚动而改变;


想实现元素的固定定位,只设置定位方式还是不够的,需要结合 CSS 中的方位属性来实现定位。



属性单位可以是 px、cm、% 等;使用时一般是水平方向的属性(left、right)与垂直方向的属性(top、bottom)结合使用;topbottom 不要同时使用,leftright 不要同时使用。

九、拓展阅读

发布于: 刚刚阅读数: 2
用户头像

No Silver Bullet 2021.07.09 加入

岂曰无衣 与子同袍

评论

发布
暂无评论
Vue进阶(幺肆贰):CSS-静态定位,相对定位,绝对定位,固定定位的用法和区别详解