zoukankan      html  css  js  c++  java
  • 辛星和你彻底搞清CSS中的相对定位和绝对定位

        前面我在解读CSS中也说过了关于相对定位和绝对定位的问题。无奈还是有些童鞋表示迷茫,于是另开一篇博客,来具体解读相对定位和绝对定位。希望可以以我的点点星光,让后来者少走弯路。

         所谓相对定位,就是设置为相对定位的元素会偏移某个距离,元素仍然保持原来的样式,它会保留该HTML元素的空间,比方我们看例如以下代码:

    .demo{
    position: relative;
    50px;
    height: 50px;
    left:50px;
    }
    它会出如今相对原来的地方向右50px的地方,而它原来所在的地方为空。

    以下说一下绝对定位,所谓绝对定位。即不占用空间,假设原来这个地方有HTML元素,那么就会重叠,这里须要特别之处的,也是我发这篇博文的目的,就是想告诉大家,绝对定位假设被父元素包括,假设父元素没有定位属性,它会依据body进行定位,因此,假设它有父元素,必须在父元素中指定定位属性。例如以下代码:

    <html>
    <head>
    	<title>辛星解读绝对定位和相对定位</title>
    	<style type="text/css">
    	.father{
    		position: relative;
    		300px;
    		height: 300px;
    		margin: 0 auto;
    		border: 1px solid orange;
    		}
    	.sun{
    		position:absolute;
    		background:purple;
    		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;
    		300px;
    		height: 300px;
    		margin: 0 auto;
    		border: 1px solid orange;
    		}
    	.sun{
    		position:absolute;
    		background:purple;
    		50px;
    		height: 50px;
    		left: 50px;
    		}
    	</style>
    </head>
    <div class = "father">
    	<div class = "sun"></div>
    </div>
    </html>

    然后是它的效果图:



    以上就是我介绍的关于绝对定位和相对定位的问题,假设您有什么问题或者不解,能够在以下留言。谢谢。

  • 相关阅读:
    javascript基础
    html基础
    css基础
    django-session和cookie
    rest架构
    django-models
    django-templates
    Alignment
    ural 1225.Flags
    ural 1009. K-based Numbers
  • 原文地址:https://www.cnblogs.com/wzjhoutai/p/7273282.html
Copyright © 2011-2022 走看看