物体position:absolute后设置left:50%发生的有趣小事
今天在重构ui控件中3秒hint提示框样式,发现了一个有趣的小事,特发个文章记录一下,方便自己日后看一下
一 准备知识
①一个已设置宽高的块状元素设置position:absolute后会保持他原来宽高
②一个内联元素设置position:absolute会自动转为一个块状元素
那么我提出三个问题:
problem01:一个没有设置宽高的块状元素position:absolute,top:0;left:0,它的宽高如何显示?
problem02:一个内联元素position:absolute,top:0;left:0,它的宽高如何显示?
problem03:一个元素position:absolute,left:50%发生什么有趣小事?
二 针对 problem01:一个没有设置宽高的块状元素position:absolute,top:0;left:0,它的宽高如何显示? 的回答
首先给物体设置position:absolute,top:0;left:0
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
.div1{
width: 300px;
height: 300px;
border: 1px #000 solid;
overflow: hidden;
position: relative;
}
.div2{
position: absolute;
background-color: red;
top:0;
left:0;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试
</div>
</div>
</body>
</html>
出现效果如下:
得出结论:没有宽高的块状元素position:absolute,top:0;left:0后默认宽度是父的宽度
三针对 problem02一个内联元素position:absolute,top:0;left:0,它的宽高如何显示?的回答
首先给物体设置position:absolute,top:0;left:0
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
.div1{
width: 300px;
height: 300px;
border: 1px #000 solid;
overflow: hidden;
position: relative;
}
.div2{
position: absolute;
background-color: red;
top:0;
left:0;
}
</style>
</head>
<body>
<div class="div1">
<span class="div2">
我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试
</span>
</div>
</body>
</html>
效果如下:
可得结论:内联元素position:absolute,top:0;left:0后,效果和没有宽高的块状元素效果一致,即默认宽度是父的宽度.
下面来延伸一段测试,看看:内联元素position:absolute,top:0;left:0后是否真的转为块状元素,最简单的测试就是给浮动起来的内联元素设置下宽高,看看是否起作用,测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
.div1{
width: 300px;
height: 300px;
border: 1px #000 solid;
overflow: hidden;
position: relative;
}
.div2{
width: 100px;
height: 100px;
position: absolute;
background-color: red;
top:0;
left:0;
}
</style>
</head>
<body>
<div class="div1">
<span class="div2">
我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试
</span>
</div>
</body>
</html>
效果如下:
得出结论:内联元素position:absolute,top:0;left:0后会转为块状元素,且高宽为程序员设置的宽高
四 针对 problem03:一个元素position:absolute,left:50%发生什么有趣小事?的回答
这个效果我之前都没有注意到,如果没有意识到这个效果存在,很有可能出现样式重复或者其他一些小问题
注意为了方便研究我将top设置为了0,下面来看测试代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
.div1{
width: 300px;
height: 300px;
border: 1px #000 solid;
overflow: hidden;
position: relative;
}
.div2{
position: absolute;
background-color: red;
top:0;
left:50%;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试
</div>
</div>
</body>
</html>
效果如下:
这个效果很容易接受,但是请注意此时的div2的宽度已经被强制设置为父宽度(300px/2)的一般,用chrome自带的审核元素查看
上图并不能证明,可能会有人猜想是屏幕宽度限制了它的宽度,测试这个想法最简单的方法就是当它position:absolute,left:50%后,让它往左移足够的空间,显示它的全部宽度,我这里采用transform: translateX(-50%);对它进行移位
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
.div1{
width: 300px;
height: 300px;
border: 1px #000 solid;
overflow: hidden;
position: relative;
}
.div2{
position: absolute;
background-color: red;
top:0;
left:50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试
</div>
</div>
</body>
</html>
效果如下:
用Chrome审查元素发现:
我们可以看出这个没有设置宽度的div在position:absolute,left:50%自动设置了自己的宽度为父宽度(300px)的一半.
当我把父宽度设置为400px的时候,再次测试上面的代码,出现结果如下:
得出的结论是一致的,没有设置宽度的div在position:absolute,left:50%自动设置了自己的宽度为父宽度(400px)的一半.
哈哈,这个效果一定要注意,要不然这个效果和其他样式混在一起会出现很多难以解释的效果.
下面再扩展一下,当有宽度的div设置了position:absolute,left:50%以后,它的宽度如何显示,不要被绕晕哦,就是正常显示啦
测试代码如下:(设置父宽度400px,子宽度300px)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
.div1{
width:400px;
height:400px;
border: 1px #000 solid;
overflow: hidden;
position: relative;
}
.div2{
width: 300px;
position: absolute;
background-color: red;
top:0;
left:50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试
</div>
</div>
</body>
</html>
效果如下:
结论:当有宽度的div设置了position:absolute,left:50%以后,它的宽度正常显示.
物体position:absolute后设置left:50%发生的有趣小事的更多相关文章
- IE 下a标签在 position:absolute 后无法点击的问题
IE 下 a 标签在 position:absolute 后无法点击的问题 条件 : DOCTYPE 为 XHTML. IE 浏览器 现象 : 将 a 的 position 指定为 absolute, ...
- 解决绝对定位div position: absolute 后面的<a> Link不能点击
今天布局的时候,遇到一个bug,当DIV设置为绝对定位时,这个div后面的相对定位的层里面的<a>Link标签无法点击. 网上的解决方案是在绝对定位层里面添加:pointer-events ...
- position absolute 绝对定位 设置问题
今天在做布局的时候,用到了绝对定位, 父级元素相对定位,子元素两个,一个元素正常文档流布局并且在前面,另一个元素绝对定位排在后面,但设置了好久,绝对定位的子元素都不会覆盖其上面的兄弟元素,最后,不知 ...
- 在一个没有设置宽高的容器中,为什么设置position:absolute后就可以全屏显示了?
此场景适用于移动端百分比布局,背景全屏显示. 在一个没有设置宽高的容器中设置背景,想要背景全屏显示,设置bcakground-size:100%;后还需设置position:absolut; 原因: ...
- css position absolute相对于父元素的设置方式
手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 大家知道css的position abs ...
- 通过案例理解position:relative和position:absolute
w3school过了HTML的知识之后,觉得要自己单纯地去啃知识点有点枯燥,然后自己也很容易忘记,所以便找具体的网站练手便补上不懂的知识点.position:relative和postion:abso ...
- CSS--position:relative和position:absolute
position:relative相对定位 1. 如何定位?每个元素在页面的普通流中会“占有”一个位置,这个位置可以理解为默认值,而相对定位就是将元素偏离元素的默认位置,但普通流中依然保持着原有的默认 ...
- position:absolute 按钮左右分布：left:0 和 right:0 以及雪碧图
问题:把两个a标签按钮 垂直居中,并且分别把两个按钮放在水平左右两边顶部1,祖父元素设定:position:relative2,把.arrow 设定上下垂直居中 position:absolute; ...
- position:absolute溢出处理
今天在做布局的时候发现把table设置了position:absolute后 overflow居然不管用了,溢出的部分依然溢出. 百度后,才想起来... ... position后,元素已经和父元素不 ...
随机推荐
- jenkins集群节点构建maven(几乎是坑最多的)
业务量变大时,单台的jenkins进行自动化构建部署,就显得没那么灵活,jenkins的集群并非像web服务器.mysql集群那样,jenkins的集群无需在额外的主机安装jenkins,但是用于ja ...
- [UOJ#24]【IOI2014】Rail
#24. [IOI2014]Rail 台湾有一个连接着岛的东.西两岸的庞大的铁路线.这个铁路线包含有 mm 个区段.这些相连的区段以数字 0,…,m−10,…,m−1 为编号,且编号由西端开始.每一个 ...
- Java 自定义序列化、反序列化
1.如果某个成员变量是敏感信息,不希望序列化到文件/网络节点中,比如说银行密码,或者该成员变量所属的类是不可序列化的, 可以用 transient 关键字修饰此成员变量,序列化时会忽略此成员变量. c ...
- idea的快捷键和操作
IntelliJ Idea 常用快捷键列表 修改方法如下: 点击 文件菜单(File) –> 点击 设置(Settings… Ctrl+Alt+S), –> 打开设置对话框. 在左侧的 ...
- PyTorch学习笔记之nn的简单实例
method 1 import torch from torch.autograd import Variable N, D_in, H, D_out = 64, 1000, 100, 10 x = ...
- memcachq队列安装
memcacheq是集中的队列小软件,使用起来简单,便捷,高效. 下载 http://git.oschina.net/sgfoot/linux-tools/raw/master/memcacheq-0 ...
- Bitmap 图片格式并用 C++ 读写 Bitmap
转自 Bitmap 图片格式并用 C++ 读写 Bitmap 1.Bitmap 图片格式 每部分的具体内容就不展开了.要说的有两点: (1)调色板不是必须的,可有可无,有没有调色板可以通过位图文件头的 ...
- IOS开发之----两种保存用户名和密码实现记住密码库
使用Keychain存储用户敏感信息 iOS的keychain服务提供了一种安全的保存私密信息(密码,序列号,证书等)的方式,每个ios程序都有一个独立的keychain存储.相对于 NSUserDe ...
- 老司机找bug的十年心路历程
一.码畜:靠编译器帮自己查语法错误 消灭笔误:编写适合程序猿的键盘练习 if (常量==变量或表达式) 使用goto接力超长的if,switch 连续的if还是if elseif 多个条件的组合:精心 ...
- PS 抠图如何使用通道法处理头发
通道抠图法抠出美女飘逸头发-PS抠图实例教程 抠图更换背景后效果图 通道抠图法抠出美女飘逸头发-PS抠图实例教程 教程步骤: 1 打开原图,进入通道面板. 通道抠图法抠出美女飘逸头发-PS抠图实 ...