你的位置:首页 > 软件开发 > 网页设计 > 物体position:absolute后设置left:50%发生的有趣小事

物体position:absolute后设置left:50%发生的有趣小事

发布时间:2016-07-05 16:00:07
今天在重构ui控件中3秒hint提示框样式,发现了一个有趣的小事,特发个文章记录一下,方便自己日后看一下一 准备知识①一个已设置宽高的块状元素设置position:absolute后会保持他原来宽高②一个内敛元素设置position:absolute会自动转为一个块状元素那么我提 ...

物体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后设置left:50%发生的有趣小事

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录