CSS-定位

1、为什么需要定位?为了让某个元素可以自由的在一个盒子内移动,并且压住其他的盒子;当我们滚动窗口的时候,盒子是固定在屏幕的某个位置的。
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS中的定位属性是布局控制的重要工具,它主要有两种主要方式:绝对定位(absolute positioning)和相对定位(relative positioning)。 **1. 相对定位 (Relative Positioning)**: - 原则:相对定位是基于元素的正常文档流来进行定位的。如果设置了`position: relative;`,元素会保持其在文档中的默认位置,然后可以通过`top`, `right`, `bottom`, 和 `left` 属性指定偏移量。 - 行为:相对定位的元素不会影响到其他元素的位置,它会在原位置的基础上移动,同时周围的元素会围绕它移动。 - 示例:你可以使用相对定位来创建一个弹出框或浮动元素。 **2. 绝对定位 (Absolute Positioning)**: - 原则:绝对定位元素会脱离正常的文档流,完全根据`top`, `right`, `bottom`, `left` 属性以及`position: absolute;`声明来定位,与最近的已定位(`position: relative;`)祖先元素相关联,如果没有,则相对于视口(浏览器窗口)定位。 - 行为:绝对定位元素会完全离开其在文档中的原始位置,其他元素也不会因此受到影响,除非它们也设置为绝对定位并覆盖了该元素。 - 示例:通常用于创建固定在页面某个角落的导航菜单或图片,或者是响应式的网页设计中,如轮播图中的图片。 **相关问题**: 1. 相对定位和绝对定位有什么区别? 2. 如何使用`position: relative;`和`position: absolute;`来配合使用? 3. 绝对定位的`z-index`属性有什么作用?

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值