div的定位 (2)

转载 2007年10月10日 16:54:00

(4)相对定位对象会占据它原来位置,在下面实例中,没有设定相对定位前,绿色小盒子是在蓝色盒子左上角的,之前也设定了绿色小盒子的浮动方式为左浮动,可以看到文本环绕在它右边,但是后来用相对定位方法把绿色小盒子重定位到外面去了,它还占着自己原来位置,因为你还可以看到文本流没有发生自动填补流动。因此这种直接的相对定位方法较少用,因为重定位对象后原来位置空了一块。相对定位常与绝对定位结合用,一般是给父级设定相对定位方式,子级元素就可以相对它进行方便的绝对定位了(请注意看后面的实例)。

<!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 type="text/css">...
<!--
body 
{...}{
    margin
:0px;
    font-size
: 9pt;
    line-height
:12pt;
    margin-top
: 150px;
    margin-left
: 150px;
}

.box1 
{...}{
    background-color
: #3CF;
    height
: 200px;
    width
: 200px;
}

.box2 
{...}{
    background-color
: #6C6;
    height
: 100px;
    width
: 100px;
    position
: relative;
    float
: left;
    top
:-120px;
}

-->
</style>
</head>

<body>
<div class="box1">
  
<div class="box2"></div>
[相对定位对象会占据原有位置]现在绿色小盒子是以子盒子形式存在蓝色大盒子中,并设定了浮动方式为左浮动,所以这些文字能环绕在它右边,当绿色小盒子用相对定位方法重定位到外边去了,文字还是不能流入它的区域,即左上角空白区域,那是因为绿色盒子还占用着它原来位置。
</div>
</body>
</html>
本文转中国秀未来设计  http://www.showweb.cn ,转载请注明出处。

(5)相对定位的对象不可以重叠。这一点也许比较难理解,先来这样理解吧,因为相对定位的对像没有脱离文本流,就像两个还是住在同一层楼的人,任何时候,他们脚下踩的地方不可能被另一个人踩着的,如果可以就意味着两个人共享一块地方了。在下面的实例中,两个小盒子都刚好排在大盒子上方,所以在大盒子中输入的文字被挤到了下面。上面两个盒子我再用相对定位的方法对调了它们的位置,当前它们下方的空间其实不是自己的,也正因为它们没有重叠,所以盒子上方还是有两个盒子占用的空间,下面文字无法向上流动(我已对盒子设定了浮动属性的了,如果不设定,即使有空间文本也不会往上流,上面盒子是块级元素,会独立占据一行)。

<!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 type="text/css">...
<!--
body 
{...}{
    margin
:0px;
    font-size
: 9pt;
    line-height
:12pt;
    margin-top
: 150px;
    margin-left
: 150px;
}

.box1 
{...}{
    background-color
: #33CCFF;
    height
: 200px;
    width
: 210px;
    padding
:5px;
}

.box2 
{...}{
    background-color
: #66CC66;
    height
: 100px;
    width
: 100px;
    position
: relative;
    float
: left;
    left
:100px;
}

.box3 
{...}{
    background-color
: #CC99FF;
    height
: 100px;
    width
: 100px;
    position
: relative;
    float
: left;
    right
:100px;
}

-->
</style>
</head>

<body>
<div class="box1">
  
<div class="box2">我家在左边</div>
  
<div class="box3">我家在右边</div>
  相对定位对象是在正常文本流中移动的,所以它的存在还是会影响文本流的布局, 如果是绝对定位,这些文本应向上流入上方两个盒子的底部了。
</div>
</body>
</html>
本文转中国秀未来设计  http://www.showweb.cn ,转载请注明出处。

(6)高度自适应的妙用。在下面实例中,右边的紫色小盒子高度是没有设定的,它的高度是随着里面内容的增加而增高的,但我们又可以通过绝对定位方法把它始终定位在父盒子的右上角。同理,我们也可以只设定高度而让宽度自动随内容增加而变宽。

<!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 type="text/css">...
<!--
body 
{...}{
    margin
:5px;
    font-size
: 9pt;
}

.box1 
{...}{
    background-color
: #33CCFF;
    height
: 500px;
    width
: 500px;
    position
: relative;
}

.box2 
{...}{
    background-color
: #CC99FF;
    width
: 100px;
    position
: absolute;
    right
:3px;
    top
:3px;
    text-align
: center;
    line-height
:15pt;
}

.box3 
{...}{
    width
: 390px;
    height
:500px;
    position
: absolute;
    left
:0px;
    top
:0px;
    line-height
:15pt;
    border-right
: thin dashed #999;
}

-->
</style>
</head>

<body>
<div class="box1">
  
<div class="box3">右边的小盒子高度是没有设定的,它的高度是随着里面内容的增加而增高的,但我们又可以通过绝对定位把它始终定在父盒子的右上角。</div>
  
<div class="box2">
    
<p>蓝色理想<br />
    经典论坛
<br />
    业界动态
<br />
    技术文档
    
</p>
  
</div>
</div>
</body>
</html>
本文转中国秀未来设计  http://www.showweb.cn ,转载请注明出处。

 

 

 

 

CSS定位DIV绝对底部

CSS定位DIV绝对底部   网页制作Webjx文章简介:CSS的简单在于它易学,CSS的困难在于寻找更好的解决方案。在CSS的世界里,似乎没有完美这种说法。所以,现在介绍的C...
  • zzq19860626
  • zzq19860626
  • 2013年08月23日 13:54
  • 6480

div的相对定位与绝对定位

一、CSS中的块模型 在CSS的定义中,有的html标签被浏览器当成一个块来显示,比如div、table、p、ul等等,我们称之为块元素;有的html标签被浏览器显示在文本行之间,如a、span...
  • qq_26386171
  • qq_26386171
  • 2017年02月20日 15:55
  • 311

DIV+CSS中的相对定位和绝对定位

一、概念 绝对定位(absolute):将被赋予此定位方法的对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位,如果对象...
  • DevilLittle
  • DevilLittle
  • 2016年05月03日 21:04
  • 1134

div布局:相对定位、绝对定位、固定定位

当用div布局,相对定位时,子div的位置是相对于母div来设置的(从母div左上角开始算),margin可以活动到母div外围而不会把母div撑大,padding则总是在母div内部折腾,会把母di...
  • qq_33448733
  • qq_33448733
  • 2016年07月07日 21:02
  • 1251

利用DIV的浮动与定位进行网页布局

利用DIV的浮动与定位进行网页布局   浮动 CSS允许任何元素浮动float,不论是图像,段落还是列表。无论先前元素是什么状态,浮动后都成为块级元素。浮动元素的宽度缺省为auto。 ...
  • qq_24861509
  • qq_24861509
  • 2015年09月30日 23:56
  • 1577

DIV布局有关属性和定位

1.CSS定位属性CSS定位和浮动,CSS定位的基本实现是,允许以相对于元素本来该出现的位置来显示元素,或者相对于父元素,相对于另外一个元素,以及相对于浏览器窗口本身。在CSS布局中,一切都可以理解为...
  • qq_25201665
  • qq_25201665
  • 2016年10月15日 00:03
  • 352

如何根据父级元素进行相对定位

需求:首先有个父级div,若干子元素如何根据父元素的位置进行相对定位?分析:看到这个需求,我首先想到的是position:relative;然而并不能满足需求。大家可以亲手试试,为啥不能满足呢?因为p...
  • zdavb
  • zdavb
  • 2015年09月17日 22:21
  • 4902

控制div跳转到指定位置的若干方法&控制页面定位到指定位置

方法一:用链接a锚点方法     div1     div2     div3   div1   div2   div3 css样式: div {      height: 800px;   ...
  • u010513603
  • u010513603
  • 2017年11月24日 14:35
  • 148

CSS position 属性:绝对定位与相对定位,以及浮动

可能的值:absolute,fixed,relative,static,static,inherit。 值 描述 absolute 生成绝对定位的元素,相对于 static 定位...
  • xiaozaq
  • xiaozaq
  • 2016年01月17日 17:53
  • 3115

Css如何定位网站的footer在固定位置(用DIV+CSS让footer始终在底部)

平时拿CSS布局都是一些内容比较多的网站,这两天用CSS+DIV弄了个内容少的页面,发现了一个小问题,可能大家都会遇到,那就是网站FOOTER的定位,如果内容比较少的话,页面的FOOTER就会随着内容...
  • cs958903980
  • cs958903980
  • 2016年06月08日 14:44
  • 9618
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:div的定位 (2)
举报原因:
原因补充:

(最多只允许输入30个字)