CSS 定位（position）

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

定位

提了层级 比浮动的高

（1）相对定位 relative ------相当于自己原来的位置
1、不影响元素本身的特性
2、不使元素脱离文档流
3、提升层级
4、如果没有定位偏移量，对元素本身没有影响

（3）绝对定位 absolute
1、如果没有定位偏移量，在原来的位置；
给了定位偏移量，相对于document发生偏移
2、让内联元素支持宽高
3、默认由内容撑开宽度
4、配合相对定位使用（给父级添加相对定位）

o_jj_o
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS定位position总结（超详细哦！）
weixin_52625590的博客
08-01 3万+
开始学习css页面布局时，先接触到的有 **标准流 或 浮动**，但是经过后续的学习发现有些场景很难通过标准流 或 浮动来快速实现。 例如： **场景1**： 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。 **场景2**：当我们滚动窗口的时候，盒子是固定屏幕某个位置的。 这个时候我们就需要学习新的布局方法了——`定位（position）`...............
CSS Position(定位)
qq_51201134的博客
07-18 62
css定位 冲！
简明CSS定位属性position
09-25
POSITION属性用来决定元素在页面上的位置，其定位属性有多个，下面一一为大家介绍下，希望大家在使用过程中可以用到
深究CSS定位position的常用技法
09-27
主要针对CSS定位position的常用技法进行探究，CSS中的position等属性确实有很多需要认真考究的地方，本文就和大家一起探索一下
position定位的使用
qq_39571602的博客
09-23 185
  深入理解css中position属性及z-index属性 　　在网页设计中，position属性的使用是非常重要的。有时如果不能认识清楚这个属性，将会给我们带来很多意想不到的困难。 　　position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute,sticky。最后将会介绍和position属性密切相关的z-index属性。   第一...
前端基础入门之css定位 position
热门推荐
LoveSummer
06-21 1万+
需求分析按照我们之前所学知识，可以怎么实现呢？应该来说不难，很容易实现 我们分别给 box2 和 box3 添加了外边距之后，就可以达到需求效果当然也可以使用浮动来解决上述问题，但稍微麻烦一点不管怎样，问题也是显而易见。我们实际开发中，页面上的元素可能很多，这样改必然是 牵一发而动全身那么仅仅靠我们之前学习的布局知识，不足以轻松应对这种场景那么就势必需要一个方便我们处理这种场景的办法，它就是定位呸！不是！糟老头子定位（position）定位是一种更加高级的布局手段通过定位可以将元素摆放到页面的任意位置使用属
CSS Positioning (定位)
h13673476027的博客
11-14 182
Positioning (定位) CSS 定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非事先设定 position 属性。他们也有不同的工作方式，这取决于定位方法. 有四种不同的定位方法。
css定位position引发的层级关系问题详解
01-21
position定位里的absolute，relative和fixed absolue：绝对定位，用top,bottom,left...首先我们要知道，css属性其实是一个立体空间有x，y，z轴，但是只有我们使用了position定位时，z轴上的层级关系才体现出来，即z-in
css position 定位
09-25
CSS中的定位(position)是网页布局的关键，尤其在创建复杂、响应式的页面时。理解position属性对于精确控制元素在页面上的位置至关重要。本篇文章主要探讨了`position`的两种主要值：`relative`（相对定位）和`...
scss概念及使用
m0_74293254的博客
07-10 1136
/ 样式规则使用参数在上面的例子中，@mixin 关键字定义了一个名为 mixin-name 的混合，可以接受多个参数（如果需要的话），并在其中定义一组样式规则。SCSS 的三种循环结构 @for、@each 和 @while 分别用于按照索引循环、遍历列表或 map 类型数据、以及根据条件循环生成样式。这些循环结构使得 SCSS 更加强大和灵活，能够根据需求生成复杂的 CSS 规则。在 SCSS 中，可以使用自定义函数来增强样式表的功能，这些函数可以接受参数并返回处理后的值。
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
uu0216的博客
07-10 1242
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
css 自定义变量 var()
Z_Wonderful的博客
07-10 206
css的一个函数：`var()`，此函数在有些场景下能优化不少代码量。
css画半圆&&画圆弧
M1512415的博客
07-12 192
【代码】css画半圆&&画圆弧。
CSS变换
最新发布
m0_63165331的博客
07-14 459
本文主要讲述CSS中的变换相关内容。
CSS上下悬浮特效
m0_56164131的博客
07-09 639
要实现一个上下悬浮的特效，可以使用CSS的@keyframes规则和动画属性。
纯CSS瀑布流
u014206461的博客
07-10 295
* 项之间的垂直间距 *//* 每个瀑布流项 *//* 瀑布流容器 */
【CSS in Depth 2 精译】第三章 文档流与盒模型 + 3.1 常规文档流
PeacefulWinter的博客
07-12 1430
本篇是《CSS in Depth》全新第二版第三章3.1小节的上半部分内容，在前一版基础上做了大幅更新。主要介绍了常规流的相关概念，并结合实例讨论了常规流下的文本居中样式的设置及注意事项。非常适合基础较薄弱的朋友参考和练手，建议收藏。
html表格账号密码备忘录：表格内容将通过JavaScript动态生成。点击查看密码10秒关闭
lulei5153的博客
07-13 330
【代码】html表格账号密码备忘录：表格内容将通过JavaScript动态生成。点击查看密码10秒关闭。
css的继承性和层叠性、权重计算、important
张茂洋的博客
07-11 240
子元素可以直接继承父元素中会对子元素产生影响的样式属性，所以有些元素没有设置样式，样式也发生了改变的原因。
css定位position
07-28
CSS中的position属性用于控制元素的定位方式。根据引用\[1\]和引用\[2\]，position属性有五个值：static、relative、absolute、fixed和sticky。 - static：元素按照正常的文档流进行布局，不会受到position属性的影响。 - relative：元素相对于其在正常文档流中的位置进行定位。引用\[3\]中的示例展示了相对定位的效果，其中.content_1元素相对于其在正常文档流中的位置进行定位。 - absolute：元素相对于其最近的非static定位的父元素进行定位。如果没有非static定位的父元素，则相对于文档的根元素进行定位。引用\[2\]中的示例展示了绝对定位的效果，其中.content元素相对于.container元素进行定位。 - fixed：元素相对于浏览器窗口进行定位，即使页面滚动，元素的位置也不会改变。 - sticky：元素在滚动到特定位置时变为固定定位，直到滚动回到指定位置之前保持固定定位。 总结来说，position属性用于控制元素的定位方式，可以通过设置不同的值来实现不同的效果。 #### 引用[.reference_title] - *1* *2* *3* [CSS Position 定位](https://blog.csdn.net/Coxhuang/article/details/103319551)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值