css 绝对定位absolute和相对定位relative实例讲解

对于不熟悉CSS的朋友来说,要掌握css position的absolute 绝对定位和relative相对定位是一个非常难的事,就算有一定css基础的朋友也不一定能完全掌握css中的absolute和relative的使用方法。本文章通过实例向大家讲解绝对定位和相对定位的使用方法和技巧。需要

一、如果元素的position属性值为absolute,那么此时分为两种情况:

1. 父级(包括直接父级和间接父级)元素中没有定义position属性(即默认属性static),那么该元素会参照页面,以页面为基准进行定位,top, left等属性会参照页面。

如果该元素的width和height属性是百分数的话,那么这两个属性也是参照页面的宽度和高度。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
*{margin: 0; padding: 0;}
#div1 {
    width: 200px;
    height: 200px;
    background: #ccc;
}
#div2 {
    width: 50%;
    height: 50%;
    background: #aaa;
    top: 100px;
    left: 100px;
    position: absolute;
}
</style>
</head>
<body>
<div id="div1">
    <div id="div2"></div>
</div>
</body>
</html>

以上代码中,div2是绝对定位,而其父级元素没有设置position属性,那么该元素就会以页面为参照进行定位。

大家可以把上面实例代码复制到这里运行一下,查看一下效果。

从运行效果可以看到,div2是相对于页面定位的,而且其宽度和高度是页面宽高的一半。

 

2. 父级元素定义了position属性(relative或absolute),则会参照父级元素。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
*{margin: 0; padding: 0;}
#div1 {
    width: 200px;
    height: 200px;
    background: #ccc;
    position: relative;
    top: 100px;
    left: 100px;
}
#div2 {
    width: 50%;
    height: 50%;
    background: #aaa;
    top: 100px;
    left: 100px;
    position: absolute;
}
</style>
</head>
<body>
<div id="div1">
    div1
    <div id="div2">div2</div>
</div>
</body>
</html>

大家可以把上面实例代码复制到这里运行一下,查看一下效果。

从运行效果可以看到,div2是相对于div1定位的,宽度和高度也是相对于div1

 

二、如果元素的position属性值为relative,那么该元素相对于其正常位置(即position:static)定位。

默认情况下宽度会占满父容器,高度根据本身内容决定。当是父元素的第一个子元素时,位置会在父元素的左上角。

那么设置其位置和大小就会以自己为参照,height的情况特殊,当设置height时,会以充满父容器的状态为参照。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
*{margin: 0; padding: 0;}
#div1 {
    width: 100px;
    height: 100px;
    background: #ccc;
}
#div2 {
    width: 50%;
    height: 50%;
    background: #aaa;
    top: 100px;
    left: 100px;
    position: relative;
}
</style>
</head>
<body>
<div id="div1">
    <div id="div2"></div>
</div>
</body>
</html>

 

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

子绝父相 这个子绝父相太重要了,是我们学习定位的口诀,时时刻刻记住的。 这句话的意思是 子级是绝对定位的话, 父级要用相对定位。 首先, 我们说下, 绝对定位是将元素依据最近的已经定位绝对、固定或相对定位)的父元素(祖先)进行定位。 就是说, 子级
分页条是web开发中常用的前端组件之一,它能将数据分批次展示给用户。我们知道诸如Bootstrap这类框架都提供了非常漂亮的分页条组件,但是你的项目可能不用到Bootstrap,你想自己定制一个属于你自己项目的漂亮的分页条,那么请看本文。 本文给大家介绍用纯CSS
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行。 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/*
css margin用于设置对象标签之间距离间隔,例如如果要使两个div标签之间有一定的间距,我们可以使用css margin属性来设置。本文章向码农介绍css margin外边距使用方法和实例,需要的朋友可以参考一下。
在网站开发中,css float是一个经常需要使用的css属性,改属性用于设置css块级元素的浮动方向(左右浮动)。本文章向码农介绍css float使用方法和实例应用,需要的码农可以参考一下。
css sprite直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。本文章向码农们介绍css sprite使用方法和基本使用实例,需要的码农可以参考一下。