css下position属性详解-阿里云开发者社区

开发者社区> 李牙刷儿> 正文

css下position属性详解

简介: 写过CSS的人都免不了与position属性打交道,但是要真正理解position属性还不是一个很容易的事。前两天博主想在一个html页面上实现一个<div>元素重叠在另一个<div>元素上,并且位于该<div>元素的右下角的效果。在网上搜到他人的解决方法,并且也实现了,这里面最关键的就是利用position属性以及left、right、top、bott
+关注继续查看

写过CSS的人都免不了与position属性打交道,但是要真正理解position属性还不是一个很容易的事。前两天博主想在一个html页面上实现一个<div>元素重叠在另一个<div>元素上,并且位于该<div>元素的右下角的效果。在网上搜到他人的解决方法,并且也实现了,这里面最关键的就是利用position属性以及left、right、top、bottom等属性。为了更为透彻地理解背后原理,博主在网上搜了相关的资料,总算是有了一些认识,或许也只是一知半解,不过先写下来供大家分享。

在html中有块元素和行元素之分。块元素诸如div、p等,其中的子元素会按垂直方向排列,这些元素显示为一块内容;与之相反,span、strong等等元素被称为行内元素,他们的内容显示在行中,即横向扩展。

凡是写在HTML中的元素都会被加载到文档流中,简单的说文档流就相当于一个容器,HTML中的所有元素都是按照从上到下,从左到右的顺序被加载到文档流中,然后在渲染网页的时候,再根据文档流中的顺序将元素一个一个显示在网页中。所以在文档流中的元素都是根据相对位置来进行绘制的。不过并不是所有的元素都会被放入到文档流中,比如position为absolute、fixed等等情况时。

那么现在就正式来讲position属性。position属性共有4个值,分别是relative、absolute、fixed和static:

        static:这是position的默认值,static元素会出现在正常的文档流中,并且按照磨人的规则绘制;

        relative:position为relative的元素依然会出现在文档流中,设置为relative的元素同时是希望在正常的显示位置的基础上进行一些微 调。例如“left:20px”的意思就是在正常显示位置的基础上左边缩进20像素;

        absolute:position为absolute的元素会从文档流中删除,absolute元素的绘制不再以正常位置进行显示,而是以其第一个position不为static的父元素为定位范围,再根据left、right等等属性进行定位。

        fixed:position为fixed的元素的定位规则更absolute类似,只是fixed元素的定位范围不再是父元素而是整个窗口。所以设置为fixed的元素在用户滚动浏览网页时,其相对于浏览器窗口的位置也不会改变。

好了,基本的定义解释清楚了,现在就结合博主自己的实践来谈谈具体的使用,博主想要实现的效果如下:

即一张图片的右下角有一个按钮。根据上文讲解到的知识,这里应该有两个div元素,其中一个为另一个的父元素:

<div class="background_img" >
    <img src="***" />
    <div class="btn"><input type="button" /></div>
</div>
既然class为btn的<div>要相对于父元素定位,所以其position为absolute,同时再通过bottom和right来设置位置:

div.btn{
position:absolute;
right:10px;
bottom:10px;
}
而对于class为background_img的<div>元素来说,其position元素不能为默认的static,所以设置为relative即可:

div.background_img
{
position:relative;
}
就这么几行,这个效果就实现了,各位读者可以自己试一下。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9320 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10785 0
Css中Position定位属性与层级关系
今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: 1 DOCTYPE html> 2 3 4 5 Css中Position定位属性与层级关系 6 7 ...
758 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13011 0
iOS开发UI篇—CAlayer层的属性
iOS开发UI篇—CAlayer层的属性 一、position和anchorPoint 1.简单介绍 CALayer有2个非常重要的属性:position和anchorPoint @property CGPoint position; 用来设置CALayer在父层中的位置 以父层的左上角...
772 0
+关注
李牙刷儿
Android开发者&amp;前端菜鸟,专注于跨平台、热修复领域
87
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载