CSS定位 position

最新推荐文章于 2023-02-15 17:34:34 发布
最新推荐文章于 2023-02-15 17:34:34 发布
阅读量2k 收藏 4
点赞数 3
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52690585/article/details/116195342
版权
本文深入探讨CSS定位，包括定位模式（相对定位、绝对定位、固定定位）及其边偏移，强调了定位口诀'子绝父相'。绝对定位实现居中技巧、与浮动的区别，以及z-index在解决元素堆叠问题中的作用。
摘要由CSDN通过智能技术生成

定位

定位=定位模式+边偏移

边偏移：（方位名词）

边偏移属性 示例 描述
top top: 80px 顶端，元素对其父元素上边线的距离。
bottom bottom: 80px 底部，元素对其父元素下边线的距离。
left left: 80px 左侧，元素对其父元素左边线的距离。
right right: 80px 右侧，元素对其父元素右边线的距离

定位的盒子有了边偏移才有价值。 一般情况下，凡是有定位地方必定有边偏移。

定位模式 position

值 语义
最低0.47元/天 解锁文章
言若-
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS定位position总结（超详细哦！）
weixin_52625590的博客
08-01 3万+
开始学习css页面布局时，先接触到的有 **标准流 或 浮动**，但是经过后续的学习发现有些场景很难通过标准流 或 浮动来快速实现。 例如： **场景1**： 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。 **场景2**：当我们滚动窗口的时候，盒子是固定屏幕某个位置的。 这个时候我们就需要学习新的布局方法了——`定位（position）`...............
CSS中的position定位属性
weixin_45249263的博客
02-08 1581
CSS中的position定位属性及文档流的简单总结，定位是一个极其重要的属性，需要大家非常熟练才行！
前端基础入门之css定位 position
LoveSummer
06-21 1万+
需求分析按照我们之前所学知识，可以怎么实现呢？应该来说不难，很容易实现 我们分别给 box2 和 box3 添加了外边距之后，就可以达到需求效果当然也可以使用浮动来解决上述问题，但稍微麻烦一点不管怎样，问题也是显而易见。我们实际开发中，页面上的元素可能很多，这样改必然是 牵一发而动全身那么仅仅靠我们之前学习的布局知识，不足以轻松应对这种场景那么就势必需要一个方便我们处理这种场景的办法，它就是定位呸！不是！糟老头子定位（position）定位是一种更加高级的布局手段通过定位可以将元素摆放到页面的任意位置使用属
CSS 定位 position
houyanhua1的专栏
11-02 342
position: （配合着定位坐标来使用）定位坐标：left:10px 距左边， top距上边， right 距右边， bottom 距底边 static 静态，不定位 fixed  固定， 脱离正常的文档流，比普通元素层级要高。相对于浏览器窗口进行定位。不会随页面的滚动而移动。 relative 相对定位。（相对于自己原来的位置，霸道的相对，定位之后任然霸占着原来的位置） abso
深究CSS定位position的常用技法
09-27
主要针对CSS定位position的常用技法进行探究，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
POSITION属性用来决定元素在页面上的位置，其定位属性有多个，下面一一为大家介绍下，希望大家在使用过程中可以用到
css position 定位
09-25
CSS中的定位(position)是网页布局的关键，尤其在创建复杂、响应式的页面时。理解position属性对于精确控制元素在页面上的位置至关重要。本篇文章主要探讨了`position`的两种主要值：`relative`（相对定位）和`...
黑马vue电商后台管理系统总结
热门推荐
奥特蛋的博客
11-06 1万+
vue电商后台管理系统-阶段总结 一、项目技术栈 前端 前端采用 vue cli 脚手架搭建框架，使用 element UI 美化项目结构 环境依赖（开发依赖，运行依赖） 富文本编辑器 nprogress加载进度条 echarts图表展示 第三方http库 axios 后端 后端是已经写好了的，采用 express 搭建的 API 服务，返回的数据是 JSON 格式的数据，只需要导入数据库，并配置一下数据库信息，就可以跑起来了，也有对应的api文档 数据库 数据库采用 MySQL 5.7
js实现页面弹窗
奥特蛋的博客
03-25 1万+
js实现三种页面弹窗 1.alert()弹出个提示框 （确定） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function myFunction(){ alert("你好，我是一个警告框！"); } </script> </head> <body> <input type="button" onclick="myFuncti
uniapp长按事件，长按删除
奥特蛋的博客
04-17 1万+
uniapp 1.uniapp中长按事件，长按删除 longtap template部分 <view @longtap="onLongPress(item.commentId)" //绑定长按事件，传入所选ID ... </view> script部分 k // 长按删除 onLongPress(e) { uni.showModal({ // 弹框询问是否进行下一步事件 title: '提示', content: '是否删除该评论
border边框、padding内边框、margin外边框
奥特蛋的博客
04-21 6475
一、border 边框 1.语法： border:border-width border:border-style border:border-color 属性 作用 border-width 定义边框粗细，单位是px border-style 边框的样式 border-color 边框颜色 2.常用边框样式 属性 作用 none 没有边框 solid 单实线 dashed 虚线 dotted 点线 3.指定边框 可以给四个边框单独指定
css常用样式标签
奥特蛋的博客
04-19 5669
css常用样式标签 css 字体的设置 font-family font-size 设置字号大小 设置字体样式 font-style normal : 正常显示。浏览器默认的样式 italic ：斜体显示文字 oblique : 歪斜体显示，比斜体的倾斜角度更大 font-weight 设置字体加粗 可取值为hold和normal 调整字符间距 letter-spacing 可以设置两个字符之间的间距（英文，中文，数字） 调整单词间距 word-spacing 主要用于单词之间
正则+案例：验证座机号码，过滤敏感词
奥特蛋的博客
08-09 3033
文章目录1.正则表达式概述1.1什么是正则表达式1.2 正则表达式的特点2.正则表达式在js中的使用2.1正则表达式的创建2.2测试正则表达式3.正则表达式中的特殊字符3.1正则表达式的组成3.2边界符3.3字符类3.3.1 [] 方括号3.3.2量词符3.3.3 括号总结3.4预定义类**案例:验证座机号码****表单验证案例**3.5正则替换replace**案例:过滤敏感词汇** 1.正则表达式概述 1.1什么是正则表达式 正则表达式（ Regular Expression ）是用于匹配字符串中字符组
vue el-form-item给多个表单项绑定rules校验规则
奥特蛋的博客
02-15 2616
只需要在内部添加el-form-item项，并在el-form-item项里绑定prop和rules规则。如图所示，我们想要在element的表单里，给多个input添加校验规则。注意：最外围el-form-item需要添加属性。
JS基础笔记
奥特蛋的博客
04-30 2357
文章目录数据存储单位关于注释JS的引用内部引用js鼠标悬停变色 在style里鼠标点击变色 在body里外部引用jsjs文件` /script.js`关于弹窗变量JavaScript简单数据类型（基本数据类型）逻辑运算符运算规则：`&&`：逻辑与`||`逻辑或：`!`：逻辑非，取反length()和lengthfor循环结构以及嵌套continue、break、returndocument.write()document.querySelector()Math对象日期函数 数据存储单位 大小
10位、13位时间戳转换成日期格式JS
奥特蛋的博客
03-25 2201
10位、13位时间戳转换成日期格式JS 此处parama为我们需要交换的时间变量 10位时间戳需要*1000 13位不需要 let date = new Date(parseInt(param)); // 13位 let date = new Date(parseInt(param) * 1000) // 10位 var timeStamp = xxxx //这里为当前时间戳 // 时间戳转换为日期格式 let date = new Date(parseInt(time
CSS如何清除浮动？
奥特蛋的博客
04-23 2195
清除浮动的方法： 1.clear属性 #d1{clear:both;} 属性值 描述 left 清除左侧浮动的影响 right 清除右侧浮动的影响 both 同时清除左右两侧浮动的影响 2.父级添加 overflow 属性 overflow 表示元素内容超过元素自身大小范围是，该如何处理。 可取值： 属性 作用 hidden 隐藏掉超出的部分 visible 显示出所有的内容 auto 根据里边元素的大小，自动在元素加滚动条 scroll 不论元素的
css定位position
最新发布
07-28
CSS中的position属性用于控制元素的定位方式。根据引用\[1\]和引用\[2\]，position属性有五个值：static、relative、absolute、fixed和sticky。 - static：元素按照正常的文档流进行布局，不会受到position属性的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值