`
liyiye
  • 浏览: 423905 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Css+Div布局学习(三)—定位Position

阅读更多

所有的框模型一开始都是按文档中正常的元素流定位,而定位position属性允许我们改变这些自然的位置。通过利用一些简单的Css规则,position使得设计者可以将HTML元素精确放置,position属性确定了每个元素框(box)定位的参考点。

在详细介绍之前,我们先简要的说明一下定位的4种方法:

1、静止定位(static):这种方法使得所有的元素最终位置都是一个静止位置。所以没有什么需要特殊说的。

2、绝对定位(absolute):这种方法允许用户指定元素的左上角、右下角或者其他的参考点和最近的父元素之间的关系将该元素从正常的文档流中拖出来。当页面滚动时,元素将保持它们各自的位置不变,随着页面一起滚动,就像粘在一起一样。

3、固定定位(fixed):这种方法允许元素相对于实际的浏览器窗口放置。

4、相对定位(relative):这方法定义相对于在默认情况下浏览器把它放置的位置。这个很难解释,可喜的是这个方法使用的很少。

 

静止定位static

定位的默认值static,不使用定位属性和使用这个值对页面没有什么效果的。

绝对定位absolute

当一个元素被绝对定位了,浏览器做的第一件事是把它从流中完全移走,接着放置在定位属性指定的位置上。看看下面的例子:

  1. #sidebar{
  2. position:absolute;
  3. top:100px;
  4. right:200px;
  5. width:280px;
  6. }

上面说了被绝对定位的元素从流中间移走了,所以在流中间的任何元素将不会受到影响,看见过网站上的小广告吧,后面的文字不会受其任何的影响,就是这样的效果!还有这里介绍的定位是指元素,对!是元素,也就是说你可以使用在任何的元素上(包括内联元素哦),当然更多的是使用在div上。

那如果我放置两个绝对定位的元素,谁会被遮挡住呢?这里需要介绍一个叫做z-index的属性,将这个属性设置的值越大,那个元素就会出现的上面。我们来看看边上的效果。我们将前面的元素设置z-index:99;

在绝对定位元素内嵌套的元素进行绝对定位会怎么样呢?这件事情是要说清楚的,不要说我们没有告诉你啊,它使用的绝对定位是相对于它的父级位置的,而不是整个页面的。

注意:个人认为不要使用绝对定位的方式去布局你的网站,因为网站的内容往往会根据你数据库内容的多少来显示,也就是说你不能完全确定网站的高度(还有一个原因不是确定高度是因为宽屏的电脑越来越多了)。而绝对定位以后你将不能应对这样的变化,比如你不能确定你的页脚放置在什么位置上合适。

固定定位fixed

固定定位指定元素的位置和你使用绝对定位基本相同,不过作用不同。它的位置是相对于浏览器窗口的,下面的那个div就是的,你滚动一下鼠标的滚轮看看就清楚了。

  1. #sidebar{
  2. position:fixed;
  3. top:300px;
  4. left:-90px;
  5. width:280px;
  6. }

注意:position:fixed;这个属性在IE6里面居然不兼容!现在使用IE6的可不少啊,那总不能就这样放任不管了吧,我提供了一个简单事例,大家可以看看通过Css hack是如何解决这个问题的。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>position:fixed in IE6 修正</title>
  6. <style type="text/css">
  7. <!--
  8. body{padding:0 10px;height:100%;
  9. font-size:12px;overflow-y:auto;}
  10. #leftMenu { background: #CCCCCC; height: 300px; width: 150px;
  11.   position: fixed; left: 40px; top: 30px; border: 1px solid #666666; padding: 10px;
  12.   letter-spacing: 0.2em; color:#990033;}
  13. #main{ background:#36F; margin-top:450px; margin-bottom:300px;
  14.   float:right; padding:10px; color:#FFF;}
  15. * html{overflow-x:auto;overflow-y:hidden;}
  16. * html #leftMenu{position:absolute;}
  17. -->
  18. </style>
  19. </head>
  20. <body>
  21. <div id="leftMenu">
  22.   <p>这是左侧的菜单,在标准的浏览器中采用固定定位,而非标准的浏览器(IE6)中,使用了一些HACK,和IE6本身的BUG!</p>
  23.   <p>enjoy it!(这句英语帅不?)</p>
  24. </div>
  25. <div id="main">
  26.   <p>这个是一个测试,IE6下position:fixed是不能使用的,但是我们使用一些技巧就能完美修复这个BUG!</p>
  27.   <p>拖动页面右边滚动条,你可以看到,灰色的左菜单始终固定,这种现象不止于IE7、FireFox,在IE6下也有较为完美的表现~这个是一个测试,IE6下position:fixed是不能使用的,但是我们使用一些技巧就能完美修复这个BUG!</p>
  28. </div>
  29. </body>
  30. </html>

相对定位relative

 

这个方法使用的很少,可能大家都没有用过,或者别人使用了也看不出来。先来看看它的工作原理,相对定位的元素仍然是页面流的一部分,不同于绝对定位和固定定位。但是它在显现自身的最后一刻叛变了,它离开了自己的岗位,偏移到Css指定的位置上,原来的岗位呢?还给他留着呢!

谁逼迫它叛变的?我们使用的position:relative;和浏览器就是元凶!大家可以试试看,你指定的家伙是怎么叛变的,我就不做这个恶人了。

分享到:
评论

相关推荐

    css+div网页模板整站

    CSS+Div布局的优势在于其灵活性和可维护性,使得网页结构清晰,代码更易于管理和修改。这种布局方式相比传统的表格布局,能更好地实现响应式设计,适应不同设备的屏幕尺寸。 Div元素,全称为“division”,即分区,...

    css+div布局源码模板

    《CSS+Div布局源码模板解析与应用》 在网页设计领域,CSS+Div布局已经成为了主流的网页构造方式,其优点在于结构清晰、样式分离、易于维护和响应式设计。本篇将深入探讨“css+div布局源码模板”的核心知识点,并...

    首页CSS+DIV布局模板

    【首页CSS+DIV布局模板】是一种常见的网页设计技术,它主要依赖于CSS(层叠样式表)和HTML中的&lt;div&gt;元素来实现页面的结构化和美化。这种布局方式相较于早期的表格布局,具有更高的灵活性、可维护性和搜索引擎优化...

    css+div布局实例

    CSS+DIV布局实例是学习网页布局时不可或缺的一部分,它能够帮助开发者掌握如何有效地利用CSS控制网页元素的布局和样式,实现灵活多变的设计效果。 CSS是一种样式表语言,用于定义HTML或XML(包括如SVG、MathML等...

    十步学会用css+div建站

    4. **布局技巧**:学习浮动(float)、定位(position)和Flexbox或Grid布局,以实现响应式设计和多列布局。 5. **响应式设计**:掌握媒体查询@media,使得网页能在不同设备和屏幕尺寸上呈现出良好的视觉效果。 6. **...

    CSS+div 布局

    下面我们将深入探讨CSS+div布局的相关知识点。 一、CSS简介 CSS是一种样式表语言,用于描述HTML或XML(包括SVG、XHTML等)文档的呈现。它允许开发者将样式与结构分离,使得网页设计更加灵活和易于维护。CSS规则由...

    css+div布局练习

    三、CSS+div布局原理 1. 浮动布局(Float Layout):早期的CSS布局方式,通过设置元素的`float`属性(如`float:left`或`float:right`),使其在容器内浮动,从而实现多列布局。但这种方法存在一些局限,如无法自适应...

    CSS+DIV详解网站好帮手

    通过CSS,我们可以对DIV进行定位(如绝对定位、相对定位、固定定位等)、设置尺寸、添加边框和背景,以及调整内边距和外边距,实现各种复杂的布局模式。在响应式设计中,DIV也常常被用来创建可适应不同屏幕尺寸的...

    CSS+DIV布局案例CSS+DIV布局案例CSS+DIV布局案例

    "CSS+DIV布局案例"的标题和描述多次强调了这一主题,表明这可能是一个关于如何有效使用CSS和DIV来实现网页布局的教学资源或示例集合。 首先,我们需要理解CSS的核心概念。CSS是一种样式表语言,用于描述HTML或XML...

    CSS+DIV实例

    三、CSS+DIV布局基础 1. 浮动布局:早期的`CSS+DIV`布局常使用`float`属性,让元素在容器中浮动,实现左右排列或自适应布局。 2. 盒模型:理解盒模型是布局的关键,它包括元素的内容、内边距、边框和外边距,影响...

    精通css+div

    这一章将深入讲解Div的使用,包括如何创建和定位Div,以及如何通过CSS属性(如display、position、float等)实现流式布局、网格布局和相对/绝对定位。同时,还会涉及Div的嵌套和组合,以实现复杂页面结构。 **第8章...

    css+div 经典问题

    在css+div布局中,jQuery可以: 1. 动态修改样式:使用`.css()`方法,可以动态改变元素的样式属性,如颜色、大小、位置等。 2. 选择和操作元素:`$()`函数是jQuery的核心,它可以选取DOM元素,然后执行一系列操作...

    CSS+DIV 布局网站实例

    在CSS+DIV布局中,&lt;div&gt;经常被用作布局的“骨骼”,通过设置宽高、浮动、定位等属性来实现各种布局效果。 2. CSS布局技术:在这个实例中,可能会使用到以下几种常见的CSS布局技术: - 浮动布局:通过设置`float`...

    css+div源代码

    通过学习和实践这些"css+div"源代码,开发者能够提升对网页布局的理解,掌握现代前端开发的核心技能。这个压缩包提供了一个极好的学习资源,涵盖了从基础到高级的各种布局技巧,对于初学者和有经验的开发者来说都是...

    css+div入门教程(很详细)

    2. 布局控制:通过CSS的display属性,可以将Div设置为块级元素或行内元素,实现流式布局、网格布局或定位布局。position属性则用于绝对定位和相对定位,使元素能在页面上的任意位置。 3. 定位与浮动:float属性可以...

    CSS+DIV光盘程序

    3. **定位和对齐**:通过position属性,CSS可以实现绝对定位、相对定位、固定定位等,使元素在页面上精确放置。同时,可以使用float和clear属性进行浮动和清除浮动,实现灵活的布局效果。 4. **盒模型**:CSS的盒...

    css+div模板

    CSS+Div布局是指使用CSS来定位和布局Div元素,从而实现网页的视觉设计。常见的布局模式有以下几种: 1. **流式布局**:元素沿屏幕从左到右排列,当屏幕尺寸改变时,元素会自动调整位置以适应不同设备。 2. **网格...

    后台模块Css+Div布局

    本资源包“后台模块Css+Div布局”包含了20多套精心收集的后台网站模板,旨在帮助设计师和开发者在创建后台界面时节省时间和精力,确保设计的高效与美观。 1. **CSS的作用**:CSS是一种样式表语言,用于描述HTML或...

Global site tag (gtag.js) - Google Analytics