文档章节

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

博为峰教研组
 博为峰教研组
发布于 2017/03/21 22:07
字数 292
阅读 4
收藏 0

二. 绝对定位

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

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

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

代码如下:

1  span{

position: absolute;

3  top: 100px;

4  left: 100px;

5  width: 100px;

6  height: 100px;

7  background-color: pink;

8  }

 

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

 

 

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

 

 

绝对定位的盒子居中

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

 

 

 

1  width: 600px;

2  height: 60px;

    position: absolute;

left: 50%;

4  top: 0;

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

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

 

 

 

© 著作权归作者所有

博为峰教研组
粉丝 51
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
IE6下z-index犯癫不起作用bug的初步研究[转]

by zhangxinxu from http://www.zhangxinxu.com 一、匆匆带过的概念 关于CSS中层级z-index的定义啊什么的不是本文的重点,不会花费过多篇幅详细讲述。这里就简单带过,z-index伴随着层的概念...

曾沙
2012/06/26
72
0
【FreeBuf字幕组】HackerOne优秀白帽黑客采访系列-Alyssa Herrera

  人物介绍   Alyssa Herrera,自从16岁接触到漏洞众测之后,就爱上了这个行业。作为众测社区为数不多的女性白帽,Alyssa Herrera的漏洞发现成就极具代表性,在美国国防部“Hack The Pe...

FreeBuf
2018/07/25
0
0
【前端Talkking】CSS系列——CSS深入理解之relative定位

1.前言 在前面的两篇文章:CSS深入理解之float浮动和CSS深入理解之absolute定位中,介绍了和的特性和使用方法,如果大家仔细阅读完了这两篇文章,相信你的CSS打怪技能又提高的一大截,那么趁...

micstone
2018/05/16
0
0
07/24 CSS中position总结

我们常常使postion用于层的定位,有时一个布局中有几个小对象,不易用css padding margin进行定位,这个时候我们就可以使用position的absolute、relative(绝对定位、相对定位)来轻松搞定。...

Winnie007
2016/07/27
25
0
红薯老大,好像还没有收录这个Wayland

来个介绍这东西的链接: 全新的X Server:揭开Wayland的面纱 感觉挺有前途的!挺期待的! 项目主页

everyx
2010/11/11
356
4

没有更多内容

加载失败,请刷新页面

加载更多

黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
10
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
12
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
5
0
Django的ChoiceField和MultipleChoiceField错误提示,选择一个有效的选项

在表单验证时提示错误:选择一个有效的选项 例如有这样一个表单: class ProductForm(Form): category = fields.MultipleChoiceField( widget=widgets.SelectMultiple(), ...

编程老陆
昨天
10
0
Vue核心概念及特性 (一)

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。 > 特点: 易用,灵活,高效,渐进式框架。 > 可以随意组合需要用到的模块 vue + components + vue-router + vuex + v...

前端优选
昨天
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部