前端面经-CSS篇(四)---定位

目录

一、CSS 定位的基本概念

二、各类定位方式详解

1. 静态定位(static)

2. 相对定位(relative)

3. 绝对定位(absolute)

4. 固定定位(fixed)

5. 粘性定位(sticky)

(1)、基础概念类

(2)、实践使用与常见问题

(3)、布局与层叠上下文(关于布局和层叠上下文的内容我后面的博客会讲解)

(4)、综合应用类

(5)、进阶与延伸

总结


一、CSS 定位的基本概念

在网页布局中,我们常常需要精确地控制元素在页面中的位置。CSS 定位属性就是用来实现这一目的的。它决定了元素如何在页面中排列,以及当其他元素变化时,它是否会跟随变化。

CSS 中最常见的定位方式有以下几种:

  1. 静态定位(static)

  2. 相对定位(relative)

  3. 绝对定位(absolute)

  4. 固定定位(fixed)

  5. 粘性定位(sticky)

每种定位方式都有各自的用途和特点。

二、各类定位方式详解

1. 静态定位(static)

  • 默认状态
    如果你不为元素指定 position 属性,那么它默认就是 static

  • 特点

    • 元素按照正常的文档流排列:块级元素一个接一个排列,内联元素从左到右排列。

    • 不能使用 topbottomleftright 等属性对元素进行位置调整。无论元素是 static 还是任何其他 position 值,你都可以给它设置 paddingmargin定位方式position)决定元素在页面中怎么“放置”或“偏移”,而**padding / margin** 决定元素自身大小、和其他元素的间距 —— 两者并不冲突。

    • 注意:“元素” 指的是它在页面中所占据的整个盒子(content + padding + border),以及在文档流中的位置。也就是说,当我们没有指定 position 属性时,这个元素(包括它的内容区、内边距和边框)会按照正常文档流的规则排列。

2. 相对定位(relative)

  • 定义
    当你为元素设置 position: relative; 后,该元素仍然会按照正常文档流排列,但你可以使用 topbottomleftright 属性对它进行“偏移”。

  • 特点

    • 元素的原始位置仍然保留(占据空间),只是显示位置会发生偏移。

    • 通常用来微调位置,或者为后代设置一个定位上下文,也就是说,为绝对定位的子元素提供参照点。

 我相信看到这里的有些朋友会疑惑设置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 会让当前元素(以及它后续的所有内容)在正常文档流中整体“往下推”。因为在普通流里,元素是一个接一

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值