目录
(3)、布局与层叠上下文(关于布局和层叠上下文的内容我后面的博客会讲解)
一、CSS 定位的基本概念
在网页布局中,我们常常需要精确地控制元素在页面中的位置。CSS 定位属性就是用来实现这一目的的。它决定了元素如何在页面中排列,以及当其他元素变化时,它是否会跟随变化。
CSS 中最常见的定位方式有以下几种:
-
静态定位(static)
-
相对定位(relative)
-
绝对定位(absolute)
-
固定定位(fixed)
-
粘性定位(sticky)
每种定位方式都有各自的用途和特点。
二、各类定位方式详解
1. 静态定位(static)
-
默认状态
如果你不为元素指定position
属性,那么它默认就是static
。 -
特点:
-
元素按照正常的文档流排列:块级元素一个接一个排列,内联元素从左到右排列。
-
不能使用
top
、bottom
、left
、right
等属性对元素进行位置调整。无论元素是 static 还是任何其他 position 值,你都可以给它设置padding
和margin
。定位方式(position
)决定元素在页面中怎么“放置”或“偏移”,而**padding
/margin
** 决定元素自身大小、和其他元素的间距 —— 两者并不冲突。 -
注意:“元素” 指的是它在页面中所占据的整个盒子(content + padding + border),以及在文档流中的位置。也就是说,当我们没有指定
position
属性时,这个元素(包括它的内容区、内边距和边框)会按照正常文档流的规则排列。
-
2. 相对定位(relative)
-
定义:
当你为元素设置position: relative;
后,该元素仍然会按照正常文档流排列,但你可以使用top
、bottom
、left
、right
属性对它进行“偏移”。 -
特点:
-
元素的原始位置仍然保留(占据空间),只是显示位置会发生偏移。
-
通常用来微调位置,或者为后代设置一个定位上下文,也就是说,为绝对定位的子元素提供参照点。
-
我相信看到这里的有些朋友会疑惑设置top和margin-top有什么区别?不是都会使得元素向下移动吗?还是relative到底形成什么样的效果
设置top和margin-top有什么区别? 、
top
用于定位(position)
-
只有在元素设置了
position: relative|absolute|fixed|sticky
时,top
才会生效。 -
top
是相对于元素的定位上下文(或者自身原始位置)进行偏移。 -
如果元素是
position: static;
(默认),top
无效。
margin-top
用于普通文档流的外边距
-
无论元素是 static 还是相对定位,都可以用
margin-top
。 -
margin-top
会在正常文档流中推开相邻元素,增加与其它块级元素的距离。 -
它并不会让元素脱离当前文档流,也不一定会覆盖其他元素;只是加大空白间距
我们来看个例子?:假设我们有两个盒子,现在不设置任何样式
<h2>1) Box A:<code>margin-top: 50px;</code></h2>
<div class="box boxA">Box A</div>
<h2>2) TextText :<code>我是一个对照组</code></h2>
<h2>3) Box B:<code>position: relative; top: 50px;</code></h2>
<div class="box boxB">Box B</div>
<h2>4) TextText :<code>我是一个对照组</code></h2>
现在我们设置
/* 1) Box A: 仅使用 margin-top */
.boxA {
margin-top: 50px;
}
/* 2) Box B: position: relative; top: 50px */
.boxB {
position: relative;
top: 50px;
}
得到的效果:
发现区别了吗? 设置boxA的marign-top是增加它和前面文字的50上外边距,它会推动下面的元素整体向下移动50px。margin-top: 50px
会让当前元素(以及它后续的所有内容)在正常文档流中整体“往下推”。因为在普通流里,元素是一个接一