css绝对定位的参照物是什么_css 清除上定位
2023-06-13 09:13:04 时间
大家好,又见面了,我是你们的朋友全栈君。
css绝对定位的重新认知
- 所谓的css绝对定位,就是 position:absolute;
- 这里记录一个我的错误认知,就是 绝对定位的参照物是 内容,还是 内容+内边距,我一直以为 参照物就是内容,但是实际上参照物是 内容+内边距
- 看看下面的事例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>css绝对定位的重新认知</title>
<style> .box{
width: 300px; height: 300px; display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: 400; color: #fff; background-color: cornflowerblue; position: relative; } .son{
position: absolute; top: 0; left: 0; width: 50px; height: 50px; background-color: blueviolet; } </style>
</head>
<body>
<div class="box">this is a box
<div class="son"></div>
</div>
</body>
</html>
- 你可以想到效果是这样的
- 但是如果给 box添加了 padding,那么绝对定位是怎样的,在 .box类中添加 padding: 50px;,来看看效果
- 可能你会疑惑,那边框呢,可以试试,在 .box类中添加边框 border: 50px solid hotpink; 来看看效果
- 可以看见并没有包含边框,因此 css绝对定位的参照物就是 内容+内边距
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/210089.html原文链接:https://javaforall.cn
相关文章
- css怎么改鼠标样式,如何利用CSS改变鼠标的样式
- 自动化测试——selenium(环境部署和元素定位篇)
- 【前端就业课 第二阶段】CSS 零基础到实战(04)定位
- 【说站】css中背景定位有哪些方法
- 聊一聊VPP常用的定位手段(2)
- 【CSS】浮动 ① ( 浮动引入 | 盒子模型位置摆放三大机制 - 普通流、浮动、定位 | 行内块元素的摆放缺陷 )
- CSS-绝对、相对、固定定位三者区别
- 【CSS】定位 ② ( 静态定位 | 相对定位 )
- 【CSS】固定定位 ( 固定定位概念语法 | 固定定位 = 浏览器可视窗口 + 边偏移 | 代码示例 )
- 【CSS】轮播图案例开发 ( 基本设置 | 子绝父相 | 浏览器水平居中 | 圆角设置 | 绝对定位居中设置 )
- 【CSS3】CSS3 2D 转换 - translate 平移 ( transform: translate 样式 | 百分比移动相对于元素自身尺寸 | 百分比移动实现绝对定位的居中效果 )
- 性能优化:MySQL如何快速定位慢SQL实战记录
- Linux基础:如何定位后台服务偶发崩溃的解决方法
- 微信企业号开发:微信考勤百度地图定位详解手机开发
- CSS学习摘要-定位详解编程语言
- Linux日志定位:一个值得探索的技术(linux定位日志)
- 保护自己之手机定位信息收集
- CSS 定位样式
- 红色宝石缓存锁的定位准确度(redis 缓存锁对象)
- Redis缓存配合索引,加快数据定位速度(redis缓存加索引)
- Lighthouse 激光定位技术开源了,但不是 Valve 做的
- 1500 元买下你的通话记录和实时定位!安全专家:我知道谁卖了你
- 提交页面的定位--scrollIntoView的用法
- 推荐深入理解css中的position定位和z-index属性
- js设置css的定位
- 简单的加密css地址防止别人下载你的CSS文件的方法
- php压缩多个CSS为一个css的代码并缓存