返回列表

float与absolute

默认分类 2014/10/05 07:27

1.position:absolute/relative;z-index:0; 对象会移出文档流之外,同z-index情况下按先后顺序依次叠加
2.float:left;的元素设置position:absolute/relative;z-index:0;遵循absolute>float原则
3.float:left;中的元素设置position:absolute/relative;z-index:0;定位参考(offsetParent)依然是float的position

参考地址: http://taligarsiel.com/Projects/howbrowserswork1.htm

原文如下:
There are three schemes:

  1. Normal - the object is positioned according to its place in the document - this means its place in the render tree is like its place in the dom tree and layed out according to its box type and dimensions
  2. Float - the object is first layed out like normal flow, then moved as far left or right as possible
  3. Absolute - the object is put in the render tree differently than its place in the DOM tree

The positioning scheme is set by the "position" property and the "float" attribute.

代码如下:

<!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=utf-8" />
    <title>Ebbinghaus Intelligent Remember [v1.0]</title>
<style>
div{border:1px solid green;min-height:50px}
.a{position:relative;z-index:1;top:30px}
.a .b{position:relative;z-index:0;background-color:darkkhaki;height:50px;top:176px}
.a .c{position:absolute;z-index:1;left:40px;top:219px;width:1080px;height:80px;background-color:#ccc}
.a .d{float:left;background-color:navajowhite;margin-top:30px}
.a .d .e{position:absolute;z-index:1;background-color:cadetblue}
.a .d .f{}
.a .d .f .g{}
.a .d .f .h{}
.a .i{float:left;background-color:beige;margin-top:30px}
.a .i .j{}
.a .i .k{}
</style>
</head>

<body style="">
<div class="a">000000000000
    <div class="c">2222222222</div>
    <div class="b">1111111111</div>
    aaaaaaaaaaaa<br/>aa<br/>a<br/>a<br/>a<br/>a<br/>aaaaa

    <div class="d">
        <div class="e">333333333</div>
        <div class="f">
            <div class="g">12121212</div>
            <div class="h">13131313</div>
        </div>
        55555555555555</div>
    <div class="i">
        <div class="j">6666666666</div>
        <div class="k">7777777777</div>
        8888888888</div>
    9999999999</div>


</body>

</html>