第十八讲:绝对定位

绝对定位参考点

如果用top描述,那么定位参考点就是页面的左上角,而不是浏览器的左上角。

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

【案例】

CSS

*{

margin: 0;

padding: 0;

}

div{

width: 200px;

height: 100px;

border:1px solid #ccc;

}

.box1{

background-color:pink;

}

.box2{

position: absolute;

left: 60px;

top: 20px;

background-color:skyblue;

}

.box3{

background-color: purple;

}

HTML

box1

box2

box3

【运行结果】

父辈做参考点

一个绝对定位的元素,如果父辈元素中出现定位了的元素,那么将以父辈这个元素,为参考点。相对定位可以做绝对定位的参考点即子绝父相。

【案例】

CSS

*{

margin: 0;

padding: 0;

}

div{

position: relative;

width: 300px;

height: 300px;

border: 1px solid #ccc;

margin:20px;

}

p{

position: absolute;

width: 100px;

height: 100px;

background-color:pink;

left: 20px;

top: 50px;

}

HTML

段落

【运行结果】

【分析】

这里的父辈元素不一定是父亲,可能是爷爷。且以最近已经定位的祖先元素为参考点。如:

【注意】

不一定是相对定位,任何定位,都可以作为参考点。子绝父绝、子绝父相、子绝父固,都是可以给儿子定位的。但工程上子绝、父绝没有一个盒子在标准流里,所以页面就不稳固,没有任何实战用途。相对来说“子绝父相”有意义,父亲没有脱标,儿子脱标在父亲的范围里面移动。

绝对定位脱标

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

【案例】

CSS

*{

margin: 0;

padding: 0;

}

span{

position: absolute;

width: 200px;

height: 100px;

padding:20;

border:1px solid #ccc;

background-color: pink;

left:20px;

top:15px;

}

HTML

span

【运行结果】

绝对定位的盒子居中

绝对定位之后,所有标准流的规则,都不适用了。所以margin:0 auto;失效。以下方法是让绝对定位的盒子居中:

【案例】

CSS

*{

margin: 0;

padding: 0;

}

div{

position: relative;

width: 300px;

height: 300px;

border: 1px solid #ccc;

margin:20px;

}

p{

position: absolute;

width: 100px;

height: 100px;

background-color:pink;

left: 50%;

top: 0;

margin-left: -50px;/* → 宽度的一半 */

}

HTML

段落

【运行结果】

打赏规则

为了避免对于打赏模式产生误解,说明一下几点内容:

1.打赏纯粹自愿,金额不限;

2.打赏不能作为解答前端技术疑问的理由;

3.打赏不能作为催促更新文章的理由;

4.打赏不能帮你做毕业设计或论文;

5.打赏不能帮你做工作中的项目;

6.总之:打赏就是这不能那不能,只是单纯打赏而已。

声明

* 公众号(QD前端基地)内转载文章全部用于学习交流,如有涉及版权问题请与我联系,我会删除相关文章。给您带来不便敬请谅解,谢谢!

* 公众号(QD前端基地)内原创文章如内容不符合事实或涉及其他方面的问题,请及时通知本人进行修改或删除。版权作品未经授权严禁盗图转载,如有雷同纯属巧合。

* 转载公众号(QD前端基地)内的文章,请先与本文作者联系经过同意后方可转载,并注明相关出处和作者信息且留下原文链接地址,这是对文章作者的尊重,也是对知识的尊重。欢迎同行网站转载本站文章。

【投诉请联系微信】:xinxiha888

前端基地

「前端基地」最专业的Web前端开发在线学习公众号,提供Web前端开发教程,是分享Web前端开发技术和前端资源的在线学习交流公众号。

关注一下,也许你就成为牛逼的前端高手呢~

微信公众号:qdbase

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190125G07AAO00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券