CSS-如何让绝对定位的容器与父块保持相对位置

原文地址:http://www.lightdew.com/a/wangyemeigong/249.html

时间:2013-03-25 16:59 来源:未知 作者:admin 点击: 876 次 好评度:

在制作网页的过程中,难免要使用到绝对定位,绝对定位是将一个窗口直接定位到一个坐标上,使用起来很方便,但同时,很多人在使用的时候,也产生了另外一个 问题,那就是不好控制,明明父块元素已经移动了,使用了绝对定位的子块却不跟着移动,这到底是怎么回事呢?
 
首先说明一下绝对定位的一个特性,那就是:使用了绝对定位的元素都已经“漂”起来了,由于它已经飘出了父块,所以,它不再受父块的控制。

且看下面的一个例子: 
<!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-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title> 
<style>
       .outer
       {
              background:red;
              width:500px;
              height:500px;
              margin:0 auto;
       }
       .middle
       {
              background:grey;
              width:250px;
              height:250px;
             
              /*position:relative;*/ /*这一句是关键,子块中的绝对定位是相对于它的上一个相对定位而进行的*/
           
              margin:50px 0 0 150px;;
       }
       .inner
       {
              background:green;
              position:absolute;
              left:100px;
              top:20px;
              width:100px;
              height:100px;
       }
</style> 
</head> 
<body>
       <div class="outer">
        <div class="middle">
            <div class="inner">
                test absolute
            </div>
        </div>
    </div>
</body>
</html>
运行结果如下:

不论你如何改变父块(图中红,灰部分)的位置,绿色子块都不会改变自己的位置。那么到底如何让绿色子块能够随着父块的位置改变而改变呢,换句话说,如何让使用了绝对定位的子块与父块保持一个固定的相对位置呢?
 
其实很简单,只需要在你需要保持相对位置的父块添加一条CSS代码“position:relative;
”即可,比如在灰色的middle中添加position:relative;,则绿色子块就会相对灰色父块保持一个相对位置,不论如何改变父块的位置,绿色子块都会与相距灰色灰左边100px,顶部20px。

如果在灰色块中不添加position:relative;而把此代码添加到红色的outer中,则绿色子块会类似上述一样,不再听命于灰色块,而与红色块保持一个相对位置。
 
如果红色块与灰色块都添加了position:relative,那么绿色子块会相对于离它最近的灰色块保持一个相对不变的位置。
 
补充说明一点:相对定位是相对于本容器当前的位置进行偏移。

时间: 2024-11-07 09:46:56

CSS-如何让绝对定位的容器与父块保持相对位置的相关文章

css浮动与绝对定位小记

浮动 float属性可以设置的值为none,left,right.对于设置了浮动的元素,会向其父元素的左侧或右侧紧靠,默认情况下,盒子的宽度不再伸展,而是根据盒子里面的内容来确定.浮动可以让一个元素移到它所在行的某一边,使得其他内容沿着该元素的边缘向下流. 浮动的盒子会脱离文档流,形成环绕的效果. 脱离文档流 当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘.因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失.如果把所有三个框都

div+css相对定位和绝对定位

今天突然发现自己在布局的时候思路很乱,于是毅然决然的想要重新的理一下自己的布局思路,今天就先从定位开始吧~ 绝对定位(absolute):将被赋予此定位方法的对象从文档流中拖出,如果对象的父级没有设置定位属性,则依据body对象左上角作为参考进行定位.绝对定位对象可层叠,层叠顺序可通过z-index属性控制,z-index值为无单位的整数,大的在最上面,可以有负值(目前负值FF不支持). 同时z-index仅能在定位元素上奏效!!! 相对定位(relative):对象不可层叠,依据left,ri

css相对定位和绝对定位

<html> <head> <title>css相对定位和绝对定位</title> <style type = "text/css" > body,div { margin:0; padding:0; height:2000px; } #div1 {   width:200px; height:200px; background-color: red; position:absolute;  z-index:2; /* lef

HTML与CSS入门——第五章 使用文本块和列表

知识点: 1.在页面上对齐文本的方法 2.三种HTML列表的使用方法 3.在列表中放置列表的方法 5.1 在页面上对齐文本: 父元素内子元素文本的居中:在控制父元素的text-align:center 子元素相对于父元素的居中:在控制子元素的margin:0 auto; PS:div指的是division(分组). 5.2 三种HTML列表: <ol>...<li>:有序列表,整列表有缩进,每个列表项前有数字或者字母 <ul>...<li>:无序列表,与有序

css体验优化之图片容器设置宽高比

需求 我们在做web页面的时候,经常会有一些图片列表,例如下图的视频列表以及表情列表:        需求要求: 1. 列表是responsive的,在不同宽度的浏览器下面,图片要自适应容器宽度 2. 图片在自适应的过程中,图片的长宽比要保持不变 常规解决方案 在container宽度固定的需求中(比如PC版页面),我们直接设置图片容器或者图片为固定的宽高就好了,比如: 1 img{ 2 width:330px; 3 height:180px; 4 } 但是这个不能满足需求,为了满足上面的需求两

CSS 中的内联元素、块级元素、display的各个属性的特点

CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 2.大体来说HTML元素各有其自身的布局级别(block元素还是inline元

css 浮动 相对定位 绝对定位区别

今天下班在地铁上看了一个样式教学视频,因为最近在学习前端.以前刚毕业的时候,感觉后台才是王道,但最近发现,前端也很重要,比如:自己接一些私单做的时候,自己要根据需求做好界面,才能更加符合客户需求,不然还得找人去做:不同的是,后台的就可以放心找人做,只要测试得没问题,效率还过得去就可以了,所以最近打算学好点前端,自己接一些单子来做.废话不多说,入正题: html是按照文件流(普通流)的方式加载的,但是全部是普通流的话,很多好看的样式是实现不了的,所以出现了浮动,相对定位,绝对定位的概念. 一.首先

css 浮动和绝对定位的区别

当一个元素使用绝对定位后,它的位置将依据浏览器左上角开始计算或相对于父容器(在父容器使用相对定位时). 绝对定位使元素脱离文档流,因此不占据空间.普通文档流中元素的布局就当绝对定位的元素不存在时一样.因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素. w3c对绝对定位的解释: 设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块.元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样.元素定位后生成一个块级框,而不

CSS 中的内联元素、块级元素以及display的各个属性的特点

CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 2.大体来说HTML元素各有其自身的布局级别(block元素还是inline元