12-DIV+CSS-定位

冷不防 2022-09-18 02:55 106阅读 0赞

定位

# 1. 基本概念 #

CSS定位(positioning)属性允许你对元素进行定位.  
定位的基本思想很简单,它允许你定义元素框  
相对于其正常位置应该出现的位置  
相对于父元素  
相对于另一个元素  
相对于浏览器窗口本身  
的位置.

# 2. position属性值 #

##  2.1 static(默认) ##

###  1) 概念 ###

元素框正常生成.  
块级元素生成一个矩形框,作为文档流/标准流的一部分,  
行内元素则创建一个或多个行框,置于其父元素中.

###  2) 注 ###

left right 不生效.

##  2.2 relative ##

###  1) 概念 ###

元素框偏移某个距离.  
元素仍保持其未定位前的形状,原本占的空间仍保留.  
从这一角度看,好像元素任然在文档流/标准流中一样.

###  2) 注 ###

以原来位置的左上角为参考点  
左移 left: 负数  
右移 left: 正数  
上移 top: 负数  
下移 top: 正数

###  3) 示例 ###

![SouthEast][]

##  2.3 absolute ##

###  1) 概念 ###

元素框从文档流完全删除,并相对于其包含块定位.  
包含块可能是文档中的另一个元素或者初始包含块.  
元素原先在正常文档流中所占的空间会关闭,  
就好像元素不存在一样.  
元素定位后生成一个块级框,  
而不管原来它在正常流中生成何种类型的框.

###  2) 注 ###

absolute定位是对离自己最近的那个非标准流盒子而言的.  
否则,以body左上角定位

###  3) 示例 ###

![SouthEast 1][]

![SouthEast 2][]

##  2.4 fixed ##

###  1) 概念 ###

元素框的表现类似于将position设置为absolute,  
不过其包含块是视窗本身.

###  2) 示例 ###

最后一个示例

# 3. 示例完整代码 #

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <title>postion-relative</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <style type="text/css">
    
            body {
                margin-left: 100px;
                margin-top: 100px;
                border: 1px solid gray;
            }
    
            .baseCls {
                border: 1px solid black;
                width: 100px;
                height: 100px;
                background-color: gray;
                margin-left: 10px;
                margin-top: 10px;
            }
    
            .leftFloat {
                float : left;
            }
    
            /*
             position - relative
             以原来位置的左上角为参考点
            */
            .moveLeft,.moveRight,.moveTop,.moveBottom {
                position: relative;
            }
    
            
            /*
             以原来位置的左上角为参考点, 左移 50px.
            */
            .moveLeft {
                left: -50px;
                background-color: red;    
            }
    
            /*
             以原来位置的左上角为参考点, 右移 50px.
            */
            .moveRight {
                left: 50px;
                background-color: red;    
            }        
    
            /*
             以原来位置的左上角为参考点, 上移 50px.
            */
            .moveTop {
                top: -50px;
                background-color: red;    
            }        
    
            /*
             以原来位置的左上角为参考点, 下移 50px.
            */
            .moveBottom {
                top: 50px;
                background-color: red;    
            }        
            
    
        </style>
    </head>
    <body>
        <h3>原始</h3>
        <div class="baseCls leftFloat">div1</div>
        <div class="baseCls leftFloat">div2</div>
        <div class="baseCls leftFloat">div3</div>
        <div class="baseCls leftFloat">div4</div>
    
        <br/><br/><br/><br/><br/><br/>
    
        <hr/>
        <h3>向左移动</h3>
        <div class="baseCls leftFloat">div1</div>
        <div class="baseCls leftFloat moveLeft">div2</div>
        <div class="baseCls leftFloat">div3</div>
        <div class="baseCls leftFloat">div4</div>
    
        <br/><br/><br/><br/><br/><br/>
    
        <hr/>
        <h3>向右移动</h3>
        <div class="baseCls leftFloat">div1</div>
        <div class="baseCls leftFloat moveRight">div2</div>
        <div class="baseCls leftFloat">div3</div>
        <div class="baseCls leftFloat">div4</div>
        <br/><br/><br/><br/><br/><br/>
    
        <hr/>
        <h3>向上移动</h3>
        <div class="baseCls leftFloat">div1</div>
        <div class="baseCls leftFloat moveTop">div2</div>
        <div class="baseCls leftFloat">div3</div>
        <div class="baseCls leftFloat">div4</div>
    
        <br/><br/><br/><br/><br/><br/>
    
        <hr/>
        <h3>向下移动</h3>
        <div class="baseCls leftFloat">div1</div>
        <div class="baseCls leftFloat">div2</div>
        <div class="baseCls leftFloat moveBottom">div3</div>
        <div class="baseCls leftFloat">div4</div>
    
    </body>
    </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <title>postion-absolute</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <style type="text/css">
            body {
                border: 1px solid gray;
            }
    
            .baseCls {
                border: 1px solid black;
                width: 100px;
                height: 100px;
                background-color: gray;
                margin-left: 10px;
                margin-top: 10px;
            }
    
            .leftFloat {
                float : left;
            }
            /*以body左上角为参照点*/
            .absMove {
                position: absolute;
                top: 100px;
                left: 50px;
                background-color: red;
            }
    
    
        </style>
    </head>
    <body>
        <div class="baseCls leftFloat">div1</div>
        <div class="baseCls leftFloat absMove">div2</div>
        <div class="baseCls leftFloat">div3</div>
        <div class="baseCls leftFloat">div4</div>
    </body>
    </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <title>postion-absolute2</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <style type="text/css">
            body {
                border: 1px solid gray;
            }
    
            .baseCls {
                border: 1px solid black;
                width: 100px;
                height: 100px;
                background-color: gray;
                margin-left: 10px;
            }
    
            .leftFloat {
                float : left;
            }
            
            .absMove {
                position: absolute;
                top: 200px;
                left: 50px;
                background-color: red;
            }
            
            /*以div5为参考点*/
            .specCls {
                border: 1px solid black;
                width: 400px;
                height: 200px;
                background-color: green;
    
                position: relative;
                left: 80px; /*改变div5的位置, div2跟着联动*/
                top: 100px;            
            }
    
        </style>
    </head>
    <body>
        <div class="baseCls leftFloat">div1</div>
        
        <div class="baseCls leftFloat">div3</div>
        <div class="baseCls leftFloat">div4</div>
    
        <div class="specCls leftFloat">
            <div class="baseCls leftFloat absMove">div2</div>
        </div>
    
    </body>
    </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <title>postion-absolute2</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <style type="text/css">
            body {
                border: 1px solid gray;
            }
    
            .baseCls {
                border: 1px solid black;
                width: 100px;
                height: 100px;
                background-color: gray;
                margin-left: 10px;
            }
    
            .leftFloat {
                float : left;
            }
            
            .fixed {
                position: fixed;
                top: 200px;
                left: 50px;
                background-color: red;
            }
            
            /*以div5为参考点*/
            .specCls {
                border: 1px solid black;
                width: 400px;
                height: 200px;
                background-color: green;
    
                position: relative;
                left: 80px; /*改变div5的位置, div2跟着联动*/
                top: 100px;            
            }
    
        </style>
    </head>
    <body>
        <div class="baseCls leftFloat">div1</div>
        
        <div class="baseCls leftFloat">div3</div>
        <div class="baseCls leftFloat">div4</div>
    
        <div class="specCls leftFloat">
            <div class="baseCls leftFloat fixed">div2</div>
        </div>
    
    </body>
    </html>

[SouthEast]: /images/20220828/f91392df3b7c45569e5b936ddacf1ab0.png
[SouthEast 1]: /images/20220828/e02b0cc0cf244abd8f8090b10f057e21.png
[SouthEast 2]: /images/20220828/6c94cc53a76e4f20ad158b24ab75b7f9.png