HTML中的布局方式:absolute、relative、fixed、static

在CSS中关于定位的内容是:

position:relative | absolute | static | fixed

    static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级,这是默认值。
    relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。
    absolute(绝对定位) 脱离文档流,通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
    fixed(固定定位) 这里所固定的参照对像是可视窗口而并非是body或是父级元素,其总是固定在浏览器窗口的某个位置,并且不受滚动的影响,是绝对的坐标定位。可通过z-index进行层次分级。

CSS中定位的层叠分级:z-index: auto | namber;

auto 遵从其父对象的定位
namber  无单位的整数值。可为负数,默认值为0,越大越靠上,值大的元素会覆盖住值小的元素。

分析:

  1. div1和div2由于是absolute布局,其位置完全由left和top来决定,不受父元素的padding的影响,完全脱离文档流
  2. div3和div4是relative布局,其位置除了由left和top来决定外,还受父元素的padding以及文档流的影响,比如,div4就受到了div3的影响,尽管其top和div3一样都是0,但是却显示在div4的下面,因为div3在文档流中,div4只能跟着文档流,排在div3的下面
  3. div5是fixed布局,其位置始终是左上角,即使浏览器滚动,它还是固定在左上角
  4. 关于z-index,如果不写则默认值是0,上面的例子很好的说明了z-index的作用
  5. absolute布局,其参考点是最近的具有position属性的元素,如果本例中将main div的position属性去掉的话,整体布局就会不一样,这个时候,div1和div2的参考点是body

[html] view plain copy

  1. <html><head>
  2. <style type="text/css">
  3. body{margin:0px;padding:0px;line-height:100%;}
  4. div
  5. {
  6. background-color:rgb(159, 206, 159);
  7. width:95px;
  8. height:95px;
  9. margin: 0px 0px 1px 1px;
  10. padding:0px;
  11. /*display:inline-block;*/
  12. letter-spacing:1px;
  13. /* only for ie*/
  14. *display:inline;
  15. *zoom:1;
  16. border:1px solid #ffffff;
  17. border-radius:5px;
  18. -moz-border-radius:5px; /* Old Firefox */
  19. opacity:1;
  20. text-align:center;
  21. color:white;
  22. }
  23. #main{width:400px;height:300px;}
  24. </style>
  25. </head>
  26. <body>
  27. <div id="main" style="
  28. position: relative;
  29. margin: 50px;
  30. padding: 80px;
  31. ">
  32. <div id="div1" style="
  33. position: absolute;
  34. left: 83px;
  35. top: 0px;
  36. background-color: rgb(199, 219, 50);
  37. ">div1 absolute</div>
  38. <div id="div2" style="
  39. position: absolute;  left: 0px;
  40. top: 90px;
  41. background-color: rgb(1, 214, 35);
  42. z-index:10;
  43. ">div2 absolute z-index<br/>:10</div>
  44. <div id="div3" style="
  45. position: relative;  left: 0px;
  46. top: 0px;
  47. background-color: rgb(23, 178, 238);
  48. z-index:11
  49. ">div3 relative z-index:11</div>
  50. <div id="div4" style="
  51. position: relative;  left: 0px;
  52. top: 0px;
  53. background-color: rgb(23, 178, 238);
  54. z-index:0;
  55. ">div4 relative z-index:0</div>
  56. <div id="div5" style="
  57. position: fixed;  left: 10px;
  58. top: 10px;
  59. background-color: rgb(229, 122, 238);
  60. ">div5 fixed</div>
  61. </div>
  62. </body></html>

请参见:http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html

时间: 2024-10-13 00:06:32

HTML中的布局方式:absolute、relative、fixed、static的相关文章

css中position属性(absolute/relative/static/fixed)

css中position属性(absolute/relative/static/fixed): position:static   无特殊定位,是html元素默认的定位方式,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. position:relative 对象遵循正常文档流,相对的是它原本在文档流中的位置而进行的偏移,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-index属性定义. position:abso

position:absolute/relative/fixed小结

1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏移量都是0,那么它将漂浮在原来的位置上,否则,会根据相对该元素外的第一个非static属性的元素进行定位,如果没有非static属性的父元素,则相对于body定位.当偏移后超出浏览器视线的向下或向右的内容不会被隐藏,而是会出现滚动条,但是向左或向上的内容超出后会被隐藏. 2.相对定位:positio

Java中CardLayout布局方式的应用

1 import java.awt.CardLayout; 2 import java.awt.Color; 3 import java.awt.Container; 4 5 import javax.swing.JButton; 6 import javax.swing.JFrame; 7 8 public class CardLayoutDemo { 9 public static void main(String[] args) { 10 //新建一个JFrame框架 11 JFrame

【java】浅析java组件中的布局管理器

这篇博文笔者介绍一下java组件中,常用的布局管理器.java组件中的布局方式有好几十种,所有的这些布局管理器都实现了java.awt.LayoutManager接口.接下来笔者介绍一下常用的5种布局管理器,FlowLayout.BorderLayout.GridLayout.GridBagLayout.CardLayout.BoxLayout.如果不希望使用布局管理器,可以调用组件的 setLayout(null); ,但是不建议设置layout为null,因为这样就失去了跨平台特性,和jav

android中九宫格布局与gridview

纵观现在的应用程序,九宫格是非常常见的一种布局方式.很多优秀的手机应用程序都采用了这一布局.下面就android中九宫格布局方式的实现和大家做一个简单的介绍. 首先在youxi.xml的布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" androi

Android开发之基本控件和详解四种布局方式

Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方式Android和iOS还是区别挺大的,在iOS中有Frame绝对布局和AutoLayout相对布局.而在Android中的布局方式就比较丰富了,今天博客中会介绍四种常用的布局方式.先总结一下控件,然后再搞一搞基本方式,开发环境还是用的Mac下的Android Studio.开始今天的正题, 虽然A

第三篇:属性_第二节:控件属性在页面及源码中的表示方式

一.属性在页面及源码中的表示方式 认真地看看页面中声明控件的代码,你会发现控件属性在页面中的表示千变万化.我们看看下面这些: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="控件属性在页面源码中的表达方式.aspx.cs" Inherits="CustomServerControlTest.控件属性在页面源码中的表达方式" %> <!DOCT

CSS中position属性( absolute | relative | static | fixed )详解

我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-index属性定义. absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位.而其层叠通过z-index属性定义. fixed:对象脱离正常文档

css中position属性(absolute|relative|static|fixed)的区别

position属性的相关定义:static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流; fixed:对象脱离正常文档流 我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-