关于css定位

最新推荐文章于 2025-09-10 10:09:14 发布

weixin_34417635

最新推荐文章于 2025-09-10 10:09:14 发布

阅读量61

点赞数

文章标签： xhtml

关于定位要弄清一个概念,那就是"文档流"

什到是文档流说得简单一点就是自上而下从左到右

生成顺序

关于html元素又分为两种块状元素内联元素

块状元素：单独占一行

内联元素: 撑完了在到下一行

有时候我们需要相同的div在一行所以就用到float

但是有时候需要把某个元素放在特定的元素的位置

但又不影响页面结构那么我们的定位功能就出现(脱离文档流，就好像悬浮于它上面)

不多说了上个例子

<!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>
    <title>Untitled Page</title>
    <style type="text/css">
        #test{
            border:1px solid #ccc;
            width:500px;
            height:2000px;
        }
        
        #test_1{
            border:1px solid #ccc;
            width:300px;
            height:300px;
            z-index:1000000;
            position:relative;
           
        }
        
        #test_1_1{
            border:1px solid #ccc;
            width:100px;
            height:100px;
            cursor: pointer;
            position:fixed;
            left: 100px;
            top:300px;
            z-index:99998;
        }
        /*
            absolute:绝对定位 如果父元素没有定位元素则按body偏移
            如果有则按定位元素来偏移(会脱离文档流)
            
            
            relative是相对于自己本身来定位的 他是参照父级的原始点为原始点，无父级则以body的原始点为原始点
            relative和absolute的另外一个很重要的区别就是当被定义成absolute的对象被移出了，那么他原来的位置也就不存在了， 
            如果被定义成relative的对象被移出了 他原来的位置还在，别的元素就不能替代这个位(不会脱离文档流)
            
            fixed:固定定位相对视窗(脱离文档流)
            
        */
    
    </style>
</head>
<body>
    <div id="test">
        <div id="test_1">
            <div id="test_1_1">
            sgsgsgs
            </div>
        </div>
    </div>
</body>
</html>

关于w3c总结说明图