揭开CSS的绝对定位真实的面纱(一)

二.绝对定位

绝对定位比相对定位更灵活。

绝对定位的盒子,是脱离标准文档流的。所以,所有的标准文档流的性质,绝对定位之后都不遵守了。

绝对定位之后,标签就不区分所谓的行内元素、块级元素了,不需要display:block;就可以设置宽、高了:

代码如下:

1span{

2position: absolute;

3top: 100px;

4left: 100px;

5width: 100px;

6height: 100px;

7background-color: pink;

8}

绝对定位要有一个参考点绝对定位的参考点,如果用top描述,那么定位参考点就是页面的左上角,而不是浏览器的左上角:

如果用bottom描述,那么就是浏览器首屏窗口尺寸,对应的页面的左下角

绝对定位的盒子居中

绝对定位之后,所有标准流的规则,都不适用了。所以margin:0 auto;失效。

1width: 600px;

2height: 60px;

position: absolute;

3left: 50%;

4top: 0;

5margin-left: -300px;   → 宽度的一半

非常简单,当做公式记忆下来。就是left:50%; margin-left:负的宽度的一半。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 说到css的盒子模型和定位相信大家一定都听说过,因为它们是css中的基础,同时也是难点,这篇文章的作用在于基础知识...
    北京大数据苏焕之阅读 3,971评论 1 1
  • 定位 相对定位 什么是相对定位? 对定位就是相对于自己以前在标准流中的位置来移动 格式: position: re...
    Jackson_yee_阅读 2,720评论 0 0
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 4,589评论 0 1
  • 有个可爱的画友说想要火烈鸟,我脑袋一懵,火烈鸟是个啥子鸟?瞬间眼前蹦出无数只秃鹫~_~,然后我又去做功课了,原来火...
    子辰手绘阅读 12,364评论 94 350