css定位介绍,CSS定位基础知识-CSDN博客

刻意去找的东西, 往往是找不到的。

天下万物的来和去, 都有它的时间。

简单的概括定位：将盒子定在某一个位置，自由的漂浮在其他盒子(包括标准流和浮动)的上面。

所以可以呈现出三种布局机制：标准流在最底层，而浮动的盒子在中间层，定位的盒子在最上层。在盒子的中间层，定位的盒子的最上层.

定位详解

语法：定位 = 定位模式 + 边偏移

边偏移

在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移，简单的说就是上下左右四个方向名词😀

边偏移属性

示例

描述

top

top: 80px

顶端偏移量，定义元素相对于其父元素上边线的距离。

bottom

bottom: 80px

底部偏移量，定义元素相对于其父元素下边线的距离。

left

left: 80px

左侧偏移量，定义元素相对于其父元素左边线的距离。

right

right: 80px

右侧偏移量，定义元素相对于其父元素右边线的距离

定位的盒子有了边偏移才有价值。一般情况下，凡是有定位地方必定有边偏移。

定位模式

在CSS中，通过position的属性定义元素的定位模式，就是定位的分类，很重要的需要掌握的

选择器 { position: 属性值; }

复制代码

定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

值

语义

static

静态定位(默认)

relative

相对定位

absolute

绝对定位

fixed

固定定位

相对定位(relative)很重要

相对定位是元素相对于他自己原来在标准流中的位置来移动的。

相对定位的特性：

相对于他自己原来在标准流中的位置来移动的。

定位的盒子原来在标准流中的区域继续占有，后面的盒子仍然以标准流的方式来对待他。

绝对定位(absolute)很重要

绝对定位是元素以带有定位的父级元素来移动的

绝对定位的特性：

完全不占任何位置

依据最近的已经定位(绝对、固定或者相对定位)的父元素进行定位。

父元素如果没有定位，则以浏览器为标准定位

如👇图所示的，父级元素有一个相对定位模式，给子元素设置一个绝对定位，此时子盒子会以父级的左上角为标准点进行定位。

如下图所示，父级元素没有定位的时候，给子元素设置一个绝对定位，该子盒子就会以文档即浏览器为标准进行定位。注意这里的父级元素不仅指子元素的上一级父亲元素，会一级一级元素的向上找，如果父亲元素的上一级有定位，就以爷爷元素为准进行定位。

总结一下：将元素依据最近的已经定位(绝对、固定或者相对定位)的父元素进行定位。

固定定位(fixed)很重要

固定定位是绝对定位的特殊形式

固定定位的特性：

完全不占有位置

只认浏览器的可视窗口，跟父级元素无任何关系，不随滚动条而滚动

绝对定位盒子居中对齐

绝对定位的盒子不能通过margin:0 auto水平居中。

这里有一个简单的计算公式让绝对定位的盒子水平居中，我们先让盒子左移50%，这时我们会发现，移动位置多了呀，多的长度是盒子的一般，那我们就需要减去盒子一半的长度，可以设置margin-left为负数，负数的值就等于盒子宽度的一半。

我们可以来实践一下：

给父级元素盒子设置一个position：relative，给需要居中的盒子设置绝对定位，left等于50%，margin-left等于－盒子宽度的一半。

绝对定位盒子垂直水平居中hin重要

👆上面主要是对绝对定位水平居中有一个详细的讲解，接下来通过一张图对绝对定位的的垂直水平居中，以及其他位置的居中进行详细的讲解：

我们先看这个图片，整个黑色边框是一个长800px，高度为400px的大盒子，示例盒子宽度为200px，高度为100px，上下两个盒子分别水平居中，左右两个盒子是垂直居中，和水平居中原理一致。

重点来啦，我们平时经常会用到的垂直水平居中，给盒子设置绝对定位后，设置：left：50%，top：50%，这时会发现盒子距离中间位置向右多偏移了宽度的一半，向下多偏移了高度的一半，所以也是需要减去的，给盒子来一个margin：-50px -100px；具体代码示例如下👇：

堆叠顺序

在使用定位布局时，可能会出现盒子重叠的情况。

加了定位的盒子，默认后来者居上，后面的盒子会压住前面的盒子。

应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。如下图所示：

z-index 的特性如下：

属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；

如果属性值相同，则按照书写顺序，后来居上；

数字后面不能加单位。

注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

定位改变display属性

之前的文章：CSS基础知识有讲过改变显示模式的几种方式：

使用display:inline-block转换成行内块元素

使用浮动float默认转换成行内块元素，那么元素内容的宽度就是盒子的宽度，类似哈

还有一个就是我们接下来会涉及到的绝对定位和固定定位也会默认转换成行内块元素，很多定位的盒子需要单独写宽度

这里有一个小细节，例如我们需要给一个导航栏设置固定定位，那我们知道固定定位是不占位置的，所以下面的标准流内容会被固定的导航栏覆盖，看不到很正常文档流的内容，这个时候我们只需要给正常文档流设置一个margin-top就可以了，值等于导航栏的高度即可。

定位与塌陷(塌陷的解决方法)

之前我们有提到过，当给一个父元素内部的子元素设置margin值的时候，父级元素可能也会发生改变，即外边距合并就是通常所说的塌陷，但是绝对定位和浮动不会触发外边距合并👇：

什么是塌陷

为什么会出现塌陷呢，只有父子元素会出现塌陷吗，下面会进行详细的讲解，很重要的，一定要掌握理解，只有了解了原因才会自然的想起他的解决方式。

原因：在标准文档流中，竖直方向的margin会出现叠加现象(水平方向不会塌陷)，两个margin紧挨着，中间没有border或者padding，当两个margin直接接触，就产生了合并，即外边距合并，表现为较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin塌陷现象。

出现塌陷的对象

兄弟关系的盒子

父子关系的盒子

塌陷的解决方案

这里总结了一下七种解决方案，需要根据项目的要求，选择适合的解决方案即可