前端自学 - CSS position定位 & 元素居中

一只小网虫

已于 2022-09-07 22:42:33 修改

阅读量224

点赞数

分类专栏： CSS 文章标签： css html5 html vscode

于 2021-10-04 17:13:52 首次发布

本文链接：https://blog.csdn.net/m0_48407729/article/details/120605394

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、文档流

普通文档流

块级元素从上向下堆叠；
内联元素从左向右排列，直至触碰到父级边界，自动换行

二、定位

通过一个坐标点将元素定位在网页任意一个位置。

三、定位分类

(一) 概念

CSS 中非常常用的思维模型，可以把每一个标签（元素）看作是一个矩形的盒子，而我们的网页页面就是由各个盒子通过不同的排列方式进行堆叠组成的，盒子之间彼此影响。

(二) 分类

static：不定位，普通文档默认属性
relative：相对定位
absolute：绝对定位
fixed：固定定位

相对定位-- relative：

语法：position: relative；
坐标点：
left || right ;
top || bootom;
相对于自己原来的位置，没有脱离文档流

绝对定位-- absolute：

语法：position: absolute；
坐标点：
left || right: 数值；
top || bottom: 数值；
绝对定位会脱离文档流；
如果当前元素的所有祖先级元素都没有定位，则相对于浏览器当前可视窗口进行定位；
如果祖先级元素有定位，则先对于有定位的祖先级元素进行定位；

定位边界点包含 padding，不包含margin、border。

固定定位-- fixed：

语法：position: fixed；
坐标点：
left || right: 数值；
top || bottom: 数值；
定位相对浏览器可视窗口，并不会随着浏览器滚动条的改变而改变位置

四、z-index 图层层级

z-index：
值：数值；
该属性用于决定定位元素(相对、绝对、固定)的层级关系、如果没有定位，则该属性不生效。

问题：
一个元素有定位，并且设置了一个很大的z-index的值，但是任然被一个元素遮挡，可能存在的问题是由于父级 z-index 层级不够

解决办法：提高父元素的 z-index 的值。

五、居中 (感觉还不够完善)

(一) 文本居中

水平方向： text-align： center
垂直方向： line-height = height；

(二) 设置宽度的块级元素水平居中：

margin-left： auto；
margin-right：auto；
position：absolute;
left: 50%;
right: 50%;
margin-top: -height/2
margin-left： -width/2；

position：absolute;
top:0;
bottom:0;
left: 0;
right: 0;
margin: auto;

position：absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);