用CSS进行元素的定位

CSS定位的基本知识

 

　在CSS里面定位主要由position属性来定义

　　　CSS中关于定位（position）是这样定义的： 　

　　定位（position）允许用户精确定义元素框出现的相对位置，可以相对于它通常出现的位置，相对于其上级元素，相对于另一个元素，或者相对于浏览器视窗本身。每个显示元素都可以用定位的方法来描述，而其位置由此元素的包含块来决定的。

 

Position有三个属性值分别是static、absolute、fixed和relative

这几天属性值的意义为：

static :默认值。无特殊定位，对象遵循HTML定位规则
absolute: 将对象从文档流中拖出，使用 left ， right ， top ，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。

如果不存  在这样的父对象，则依据 body 对象。而其层叠通过z-index 属性定义

　　fixed :未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 relative :对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置

 

检索对象的定位方式。设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。

要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。设置此属性值为 relative 会保持对象在正常的HTML流中，但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的，在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。内容的尺寸会根据布局确定对象的尺寸。例如，设置一个 div 对象的 height 和 position 属性，则 div 对象的内容将决定它的宽度( width )。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 position 。

网页的定位分为两种

1．相对定位

       相对定位是一个非常容易理解的概念，如果对一个元素进行相对定位，它将在他所在的位置上，然后可以通过设置垂直和水平的位置，让这个元素‘相对于’起点进行移动，如果将top 设置为20px,那么框就会出现在原位置顶部下面20px的地方，如果将left 设置为20px 那么框就会向右移动20px

#mybox{

              Position:relative;

              Top:20px;

              Left:20px;

}

如下图：

 

使用相对定位时，无论是否进行移动，元素仍然占据原来的空间，因此移动元素会导致它覆盖其他框。

2．绝对定位

相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。与之相反，绝对定位使元素的位置与文档流无关，因此不占据空间。普通文档流中其他元素的布局就像绝对定位的元素不存在时一样。

 

绝对元素的位置相对于最近已定位的祖先元素。如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。根据用户代理的不同，最初的包含块。根据代理的不同可能是画布或HTML。

对于定位的主要问题是记住每种定位的意义。相对定位是“相对于”元素在文档流中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么是最初的包含块。

与相对定位的框一样，绝对定位的框可以从它的包含块向上，下左，右移动。这提供了很大的灵活性。可以直接将元素定位在页面上的任何位置。

 

 

因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素，可以通过设置z-index属性来控制这些框的堆放次序。Z-index值越高，框在堆中的位置就越高。

绝对定位的元素的位置相对于最近的已定位祖先元素，这使我们能够实现一些非常有意思的效果。例如，假设希望让一个文本段落对准一个大框的右下角。只需对包含框进行相对定位，然后相对于这个框对段落进行绝对定位：

#branding{

       width:700px;

       height:100px;

       position:relative;

}

#branding .tel{

       position:absolute;

       right:10px;

       bottom:10px;

       text-align:right;

}

<div id="branding">

<p class="tel">Tel:[phone]</p>

 

相对于相对定位的祖先元素对框进行绝对定位，这在大多数现代浏览器中实现得很好。但是，在Windows上的IE5.5和IE6有一个bug。如果试图对于相对定位的框的右边或底部设置绝对定位的框的位置，那么需要确保相对定位的框已经设置了尺寸。如果没有，那么IE会相对于画面定位这个框。在第9章中可以进一步了解这个bug和修复方法。简单的解决方案是为相对定位的框设置宽度和高度，从而避免这一问题。

</div>

在进行页面布局时，绝对定位是非常有用的工具，尤其是在使用相对定位的祖先元素的情况下。完全可能只使用绝对定位创建出整个设计。为此，这些元素需要具有固定尺寸，这样就能够将它们定位在任何地方而不会有重叠的风险。

因为绝对定位的元素与文档流无关，所以它们不影响普通流中的框。如果扩大绝对定位的框（例如，通过增加字号），周围的框不会重新定位。因此，尺寸的任何改变会改变会导致绝对定位的框产生重叠，从而破坏精心调整过的布局。

3．固定定位

固定定位是绝对定位的一个子类别。差异在于固定元素的包含块是视口，这使我们能够创建总是出现在窗口中相同位置的浮动元素。这种情况的一个示例一直出现在屏幕上的相同位置。这有助于改进易用性，用户不必为了发表评论而一直滚动到页面询问。

不幸的是，IE6和更低版本的IE不支持固定定位。为了解决这个问题，Jonathan Snook使用Javascript在IE中重现了这个效果。

2. CSS定位布局

1. 两栏绝对定位

现在就可以使用相对定位和绝对定位来做一个两栏布局了。

#div-1 {

 position:relative;

}

#div-1a {

 position:absolute;

 top:0;

 right:0;

 width:200px;

}

#div-1b {

 position:absolute;

 top:0;

 left:0;

 width:200px;

}

 

 

两栏绝对定位设置高度：

 

一种方案是给元素设定固定高度。但这种方案对大多数设计来说不太适合，因为一般我们不知道元素中会有多少文本，或者将要使用的精确的字号。

#div-1 {

 position:relative;

 height:250px;

}

#div-1a {

 position:absolute;

 top:0;

 right:0;

 width:200px;

}

#div-1b {

 position:absolute;

 top:0;

 left:0;

 width:200px;

}

 

6. position:relative + position:absolute

如果我们给 div-1 设置 relative 定位，那么 div-1 内的所有元素都会相对 div-1 定位。如果给 div-1a 设置 absolute 定位，就可以把 div-1a 移动到 div-1 的右上方。

#div-1 {

 position:relative;

}

#div-1a {

 position:absolute;

 top:0;

 right:0;

 width:200px;

}