辛星和你彻底搞清CSS中的相对定位和绝对定位
前面我在解读CSS中也说过了关于相对定位和绝对定位的问题。无奈还是有些童鞋表示迷茫，于是另开一篇博客，来具体解读相对定位和绝对定位。希望可以以我的点点星光，让后来者少走弯路。
所谓相对定位，就是设置为相对定位的元素会偏移某个距离，元素仍然保持原来的样式，它会保留该HTML元素的空间，比方我们看例如以下代码：
.demo{
position: relative;
width:50px;
height: 50px;
left:50px;
}
它会出如今相对原来的地方向右50px的地方，而它原来所在的地方为空。
以下说一下绝对定位，所谓绝对定位。即不占用空间，假设原来这个地方有HTML元素，那么就会重叠，这里须要特别之处的，也是我发这篇博文的目的，就是想告诉大家，绝对定位假设被父元素包括，假设父元素没有定位属性，它会依据body进行定位，因此，假设它有父元素，必须在父元素中指定定位属性。例如以下代码：
<html>
<head>
<title>辛星解读绝对定位和相对定位</title>
<style type="text/css">
.father{
position: relative;
width:300px;
height: 300px;
margin: 0 auto;
border: 1px solid orange;
}
.sun{
position:absolute;
background:purple;
width:50px;
height: 50px;
left: 50px;
}
</style>
</head>
<div class = "father">
<div class = "sun"></div>
</div>
</html>
效果图：
可能有童鞋会问，假设我们不指定父元素的定位又会怎样呢？请看以下代码。我把css代码中的哪一行给凝视掉之后，源码例如以下：
<html>
<head>
<title>辛星解读绝对定位和相对定位</title>
<style type="text/css">
.father{
//position: relative;
width:300px;
height: 300px;
margin: 0 auto;
border: 1px solid orange;
}
.sun{
position:absolute;
background:purple;
width:50px;
height: 50px;
left: 50px;
}
</style>
</head>
<div class = "father">
<div class = "sun"></div>
</div>
</html>
然后是它的效果图：
以上就是我介绍的关于绝对定位和相对定位的问题，假设您有什么问题或者不解，能够在以下留言。谢谢。
辛星和你彻底搞清CSS中的相对定位和绝对定位的更多相关文章
- css中的相对定位与绝对定位
之前说过了CSS有三种基本的布局机制:普通流.浮动和绝对定位.除非专门指定,否则所有的框都在普通流中定位.而普通流中元素框的位置由元素在HTML中的位置决定. 相对定位 相对定位实际上被看做普通流定位 ...
- CSS中的相对定位和绝对定位
1.元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的, 使用相 ...
- css 中的相对定位和绝对定位
1.默认不写position的话,值为static. 2.相对定位:相对于元素自己本身的位置偏移,虽然位置偏移,但元素本身占据的空间并不释放. 3.绝对定位:相对于离它最近的,position不为st ...
- 辛星彻底帮您解决CSS中的浮动问题
浮动,是CSS布局中必须经过的一道坎,假设不熟悉浮动.那么CSS的布局就如同空中楼阁,而谈到浮动,很多其它的是和div相结合,div是一个块级元素.这个我前面的博文有介绍,假设大家喜欢我的风格,能够搜 ...
- css中的相对定位与绝对定位的区别
1.绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是相对 ...
- 辛星跟您解析在CSS面包屑中三角形的定位问题
刚才看到有位网友非常纳闷第二个棕色三角形是怎么定位的,我当感觉在以下说不清楚,就特别开了一片博客.来说清楚它.首先,前面的代码我们先抄下来,至于前面这部分代码是怎么来的,读我的用CSS制作面包屑导航的 ...
- 辛星和您一起解析PHP中的单例模式
事实上单例模式还是用的挺多的,要说到最经典的样例.可能就是操纵数据库的类了,它假设是单例的话,能够避免大量的new操作消耗资源,而假设系统中须要一个类来管理全局的信息,则把它用成单例也是非常不错的.由 ...
- 辛星与您彻底解决CSS浮子（下一个）
上述博客文章,我们解释如何使用CSS浮子,这是一个看我们如何解释清除CSS浮子.其实CSS浮动是很清楚easy,只需要使用clear它财产,至于如何利用好它.很多人可能会表决雾,我是个新手的时候还经常 ...
- css之position相对定位和绝对定位
一.position的四个值:static.relative.absolute.fixed. 绝对定位:absolute和fixed统称为绝对定位 相对定位:relative 默认值:static 二 ...
随机推荐
- android sdk下载SDK Platform失败记录
在使用android sdk manager下载的时候会遇到 下载完毕后,你可能会出现如下图一样的错误,就算重复尝试多次依然无法正常安装 Downloading SDK Platform Androi ...
- The WebSocket Protocol
[Docs] [txt|pdf] [draft-ietf-hybi-t...] [Diff1] [Diff2] [Errata] Updated by: 7936 PROPOSED STANDAR ...
- 网页图表控件Highcharts选项配置参数
Highcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,目前官网只提供英文版的开发配置说明文档,而中文版的文档网上甚少,且零散不全.这里,我把Highcharts常用的最核心的参 ...
- 《大话操作系统——做坚实的project实践派》(5)
有人说我不是仅仅会玩X86吗?我如今铁板钉钉的申明:我事实上兼通:ARM.IA-32.IA-32e.AMD64. 了解MIPS.但没做过MIPS由于确实没有对应的MIPS硬件平台.
- Java I/O操作汇总
作者:卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/41154807 本文简绍解说了FileWriter.FileReader.Buf ...
- hdu 3572 Task Schedule（最大流&&建图经典&&dinic）
Task Schedule Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) To ...
- Java之基础(1) - 编程中“为了性能”尽量要做到的一些地方
最近的机器内存又爆满了,除了新增机器内存外,还应该好好review一下我们的代码,有很多代码编写过于随意化,这些不好的习惯或对程序语言的不了解是应该好好打压打压了. 下面是参考网络资源总结的一些在Ja ...
- 后台dubug有值且sql也打印出来执行了但是前台就是查不到数据
记录在sturts2里面 摔得最深的一次 public String queryJoinAccount(){ //用来存储分页的数据 pageMap=new HashMap<String, Ob ...
- vue结合Promise及async实现高效开发。
在vue中平时的开发中我们应该都会遇到promise函数,比如我们常用的axios,resource这都是用来做http请求的插件. 在平时的开发里,关于axios我们可能是这样写的 import a ...
- Android 混淆代码总结
为了防止自己的劳动成果被别人窃取,混淆代码能有效防止被反编译,下面来总结以下混淆代码的步骤: 1. 大家也许都注意到新建一个工程会看到项目下边有这样proguard-project.txt一个文件,这 ...