CSS-定位

最新推荐文章于 2024-07-05 14:51:32 发布
最新推荐文章于 2024-07-05 14:51:32 发布
阅读量107 收藏
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35805004/article/details/115910993
版权

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

ZC97
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS布局-定位以及层级关系
NewHouser的博客
10-19 2450
适用于在网页中需要特定排版位置的元素使用，一般出现于有嵌套关系的盒子模型中。定位分为静态定位、相对定位、绝对定位、固定定位。
css定位页面元素,页面元素定位-CSS元素基本定位
weixin_32147807的博客
08-04 2264
基本定位"""属性定位 一 """# #通过id# driver.find_element_by_css_selector("#kw").send_keys(u"博客园")# #通过class# driver.find_element_by_css_selector(".s_ipt").send_keys(u"博客园")#通过标签 数量过多的情况下需要增加标签过滤# driver.find_ele...
17.前端笔记-CSS-定位
虽然但是
12-03 1150
定位：静态、固定、绝对、粘性、相对定位
CSS-----绝对定位盒子水平居中
wode39的博客
08-08 1229
正确做法：子盒子通过left属性向右移动父盒子宽度的50%，再通过margin-left负值向左移动自身宽度的50%；垂直居中同理可得：通过top属性向下移动父盒子高度的一半，再通过margin-top负值向上移动自身个高度的一半。在CSS中绝对定位的盒子无法通过margin：0 auto;.........
CSS-浮动与定位
花城的博客
08-28 4728
CSS浮动. 父标签的塌陷问题及解决方法、溢出属性、CSS定位. 定位方法. 修改位置. 是否脱离文档流、z-index属性、透明度
css---相对定位+绝对定位实现元素居中
string佳佳的博客
03-29 2144
效果图 实现方式 <view class="img-wrap"> <image mode="aspectFill" class="img-bg" src="{{userInfo.avatarUrl}}"></image> <view class="info-wrap"> <image src="{{userInfo.avatarUrl}}" /> <view
mini-css-extract-plugin Conflicting order 警告解决
学如逆水行舟，不进则退
02-22 5333
出處
css---窗口定位（固定定位）和滚动条设置
weixin_46218101的博客
10-09 3372
前端入门笔记之css（7） 窗口定位： 根据窗口进行定位。 可以滑动，广告栏类似的状态； 有滚动条的话，一直跟着窗口走； 绝对定位不会跟着窗口走。 {position：fixed；left:300px;top:300px}
【CSS---定位基础篇】
weixin_73833411的博客
06-10 1408
CSS---定位基础篇
解决postcss、postcss-loader 和less-loader 导致的报错问题
热门推荐
筱竹的博客
03-19 1万+
这里写自定义目录标题欢迎使用Markdown编辑器一、问题背景介绍二、报错问题分析： 欢迎使用Markdown编辑器 解决 Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8. 一、问题背景介绍 1、在Vue的项目中使用了postcss-pxtorem这个包，同时在项目根目录中，配置了postcss.config.js,如下图所示： module.exports = { plugins: { 'autopr
CSS-position(定位）
03-25
在网页设计中，CSS（层叠样式表）的position属性是至关重要的，它决定了元素在页面上的布局...在实践中，根据项目需求选择合适的定位方式，结合其他CSS属性如margin, padding, z-index等，可以实现各种各样的视觉效果。
css-layout-and-positioning-css布局与定位
03-26
接下来，我们讨论CSS定位机制。定位分为正常流（Normal Flow）、浮动（Float）、绝对定位（Absolute Positioning）和固定定位（Fixed Positioning）。 1. 正常流：这是默认的布局方式，元素按照源代码顺序从左到右...
chenyongzhe#programming-data#CSS-06-定位1
07-25
1.1 不脱标，老家留坑，形影分离 1.2 相对定位用途 1.3 相对定位的定位值 1.4 特性总结 2.1 绝对定位脱标 2.2 参考点 2.3 以盒子为参考
advanced-css-course
04-05
高级CSS课程 编写好HTML和CSS的三个Struts 响应式设计 可维护和可扩展的代码 网络性能 响应式设计 流体布局 媒体查询 响应式图像 正确的单位 桌面优先与移动优先 可维护和可扩展的代码 干净的 容易明白 生长 可重复...
postcss-pxtorem:使用PostCSS将像素单位转换为rem（根em）单位
04-06
使用默认设置，仅定位与字体相关的属性。 / / input h1 { margin : 0 0 20px; font - size : 32px; line-height : 1.2; letter - spacing : 1px; } / / output h1 { margin : 0 0 20px; font - size : 2rem; ...
flex布局中子元素内容超出时，子元素本身出现滚动条实现方法
Misnice的博客
07-02 266
flex布局中子元素宽度平均分配，并且当子元素内容超出时，子元素本身出现滚动条
SCSS使用变量动态修改elmentUI元素样式
q283614346的博客
07-02 705
SCSS使用自定义变量动态修改elmentUI元素样式
【CSS in Depth 2 精译】2.4 视口的相对单位
PeacefulWinter的博客
07-03 882
本篇为《CSS in Action》最新第二版第2.4小节全新改版内容。文章在第一版的基础上，对视口的新增相对单位做了细致入微的探讨，还进行了分类汇总。在视口相对单位的应用方面，也对旧版内容做了全新升级，新加 clamp 函数实现响应式设计，非常值得前端开发人员用心积累。
css使用伪元素after或者before的时候想要给after设置z-index无效
最新发布
qq_49416650的博客
07-05 182
css使用伪元素after或者before的时候想要给after或者before设置一个层级关系，使该伪类写入的样式在box的下面，发现给box设置z-index无效，需要找到父级元素，在父级元素上设置z-index值并且将伪类设置z-index:-1。
css绝对定位相对定位
06-14
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、付费专栏及课程。

余额充值