Relative与Absolute组合使用

小伙伴们学习了绝对定位的方法:使用position:absolute可以实现被设置元素相对于浏览器(body)设置定位以后,

大家有没有想过可不可以相对于其它元素进行定位呢?答案是肯定的,当然可以。使用position:relative来帮忙,但是必须遵守下面规范:

1、参照定位的元素必须是相对定位元素的前辈元素:

<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>

从上面代码可以看出box1是box2的父元素(父元素当然也是前辈元素了)。

2、参照定位的元素必须加入position:relative;

#box1{
    width:200px;
    height:200px;
    position:relative;
}

3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。

#box2{
    position:absolute;
    top:20px;
    left:30px;
}

这样box2就可以相对于父元素box1定位了(这里注意参照物就可以不是浏览器了,而可以自由设置了)。

示例:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>相对参照元素进行定位</title>
<style type="text/css">
div{border:2px red solid;}
h1{font-size:30px;}
#box3{
    position:relative;
    top:20px;
    left:30px;
    width:200px;
    height:200px;
}
#box4{
    position:absolute;/*只对最接近的并有定位属性的父元素有依赖*/
    width:99%;
    bottom:0px;
}
</style>
</head>

<body>
<h1>下面是演示部分</h1>
<div id="box3">
    <img src="http://img.mukewang.com/541a7d8a00018cf102000200.jpg">
    <div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div>
</div>
</body>
</html>

效果:

时间: 2024-10-20 23:08:37

Relative与Absolute组合使用的相关文章

布局模型 之 层模型(position的relative、absolute与fixed区别?)

css的布局模型分为流动模型(Flow).浮动模型(Float).层模型(Layer). 浮动模型(Float)和层模型(Layer)有什么显著区别?     浮动模型(Float):浮动是让某元素脱离文档流的限制,在浮动框之前和之后的非定位元素会当它不存在一样,可能沿着它的另一侧垂直流动:浮动的元素仍然会占据文档流的物理空间.关于浮动模型的详细说明请看另一篇文章的介绍.http://ycgit.blog.51cto.com/8590215/1958452 层模型(Layer):设置为层模型的元

CSS关于定位float、static、relative、absolute、fixed

html的对象是按照文档流的方式,从上而下,从左往右的布置对象/元素. static: 元素默认的定位方式,遵从基本的html布置规则 relative:相对定位,相对哪个对象呢? 相对的是元素本身的位置 <div class="div5"></div> <div class="div7"></div> <style>     div{         width:300px;         height

关于通过jquery来理解position的relative及absolute

一个多月前刚刚开始系统接触Javascript/css/html的时候一直对position属性的relative及absolute不是很了解.今天在接触jquery中无意间发现通过slideToggle() 的滑动效果可以更加方便清楚的了解position属性的含义.下面是代码. <!DOCTYPE html><html><head><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.

relative和absolute的效果

我对这样几个效果不是特别理解: 1.float的效果: 就是搞不清楚我想要什么效果的时候可以将某个标签设置为float,一直没总结出什么规律. 2.relative和absolute的效果: 也是不清楚在什么情况下我们设置为relative,在想要什么效果的时候应该选择absolute,还劳烦您帮忙解惑 float在需要将2个在不同行的元素显示在同一行时使用,它可以设定元素是居左还是居右 relative和absolute是在设定元素相对定位时使用 比如A和B元素, A在外面,B在里面 那么B就

relative和absolute理解

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

定位以及relative和absolute的结合

三种定位 1. static 默认定位,基于文档流 (left,right,top,bottom,z-index对他没用) 2. relative 相对定位,这个元素基于原来的位置可以用l-r-t-b 来移动,原来的位置依然站着 3. absolute 绝对定位 ,脱离文档流 relative和absolute的结合 (原文:http://www.barelyfitz.com/screencast/html-training/css/positioning/) HTML Markup 1 2 3

[转载]position的四个属性值: relative ,absolute ,fixed,static

position的四个属性值: relative ,absolute ,fixed,static  下面分别讲述这四个属性,以简单代码表示 <div id="parent">     <div id="sub1">sub1</id>     <div id="sub2">sub2</id></div> 1. relative relative属性相对比较简单,我们要搞清它是相

position的四个属性值: relative ,absolute ,fixed,static

position的四个属性值: relative ,absolute ,fixed,static  下面分别讲述这四个属性,以简单代码表示 <div id="parent">     <div id="sub1">sub1</id>     <div id="sub2">sub2</id></div> 1. relative relative属性相对比较简单,我们要搞清它是相

relative、absolute和float

relative.absolute和float position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bottom和z-index属性.(默认这些属性未激活,设置了也无效) 设置position:relative和position:absolute都会让元素浮起来,会改变正常情况下的文档流. 不同: position:relative会保留自己在z-index:0层的占位,left.top.right.bo