Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 亚洲一区导航,天天干天天操天天碰,四房色播开心网 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          關于html元素的css-定位
          
        
           
          
	
	
          
		
                        
          理解定位，首先要了解文檔流是什么。 
          文件流：指盒子按照html標簽編寫的順序，從上到下，從左到右排列，塊元素占一行，從左到右排列，每一行元素在一行中從左到右排列，先寫的先，后寫的排在后面，每個盒子都占據自己的位置。 
          位置可以使方框脫離文檔流，就好比將元素分割成幾層，沒有位置的在一層，定位在沒有定位的上面一層。 
          你可以用Z-index設置等級，Z-index越大，顯示的就越向前。在創建網頁彈框時，通常將其設置為最大。 
          我們可以使用css的position屬性來設置元素的定位類型，postion的設置項如下： 
          relative生成相對定位元素，元素所占據的文檔流的位置保留，元素本身相對自身原位置進行偏移。 
          absolute生成絕對定位元素，元素脫離文檔流，不占據文檔流的位置，可以理解為漂浮在文檔流的上方，相對于上一個設置了定位的父級元素來進行定位，如果找不到，則相對于body元素進行定位。 
          fixed生成固定定位元素，元素脫離文檔流，不占據文檔流的位置，可以理解為漂浮在文檔流的上方，相對于瀏覽器窗口進行定位。 
          static默認值，沒有定位，元素出現在正常的文檔流中，相當于取消定位屬性或者不設置定位屬性。 
          <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>元素的定位</title>
    <style>
        .con1,.con2,.con3,.con4,.con5{
            border: 1px solid #000;
            margin: 10px;
            height: 400px;
        }
        /* 這個div屬于它下屬div的父元素，如果沒有設置浮動，當下屬div設置absolute時，相對于body偏移*/
        .con3{
            position: relative;  
        }
        .no_pos_1,.no_pos_2{
            height: 100px;
            width: 400px;
            margin :10px;
            font-size: 16px;
        }
        .no_pos_1{
            background-color: red;
        }
        .no_pos_2{
            background-color: gold;
        }

        .relative_1,.relative_2{
            height: 100px;
            width: 400px;
            margin-top :10px;
            font-size: 16px;
        }
        .relative_1{
            background-color: red;
            position: relative;
            left: 50px;
            top: 50px;
        }
        .relative_2{
            background-color: gold;
        }

        .absolute_1,.absolute_2{
            height: 100px;
            width: 400px;
            margin-top :10px;
            font-size: 16px;
        }
        .absolute_1{
            background-color: red;
            position: absolute;
            left: 50px;
            top: 50px;
        }
        .absolute_2{
            background-color: gold;
        }
        .fixed_1,.fixed_2{
            height: 100px;
            width: 400px;
            margin-top :10px;
            font-size: 16px;
        }
        .fixed_1{
            background-color: red;
            position: fixed;
            left: 50%;
            margin-left: -200px;  /* 設置水平垂直居中*/
            top: 50%;
            margin-top: -50px;
            z-index: 9999;   /*  彈框一般設置足夠大的值 */
        }
        
         /* 彈框效果 */ 
        .mask{
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: black;
            opacity: 0.6;      /* 設置透明度 */
            z-index: 9998;   /* 一般比彈框設置的值小1*/
        }
        .fixed_2{
            background-color: gold;
        }
        .static_1{
            height: 100px;
            width: 400px;
            margin-top :10px;
            background-color: gold;
            position: static;
        }
</style>
</head>
<body>
    <div class="mask">

    </div>
    <div class="con1">
        <div class="no_pos_1">
            沒有使用定位
        </div>

        <div class="no_pos_2">
            沒有使用定位
        </div>
    </div>
    <div class="con2">
        <div class="relative_1">
            relative 生成相對定位元素，元素所占據的文檔流的位置保留，元素本身相對自身原位置進行偏移
        </div>
        <div class="relative_2">
            
        </div>
    </div>
    <div class="con3">
        <div class="absolute_1">
            absolute 生成絕對定位元素，元素脫離文檔流，不占據文檔流的位置，可以理解為漂浮在文檔流的上方，相對于上一個設置了定位的父級元素來進行定位，如果找不到，則相對于body元素進行定位
        </div>
        <div class="absolute_2">
            
        </div>
    </div>
    <div class="con4">
        <div class="fixed_1">
            fixed 生成固定定位元素，元素脫離文檔流，不占據文檔流的位置，可以理解為漂浮在文檔流的上方，相對于瀏覽器窗口進行定位。
        </div>
        
        <div class="fixed_2">

        </div>
    </div>
    <div class="con5">
        <div class="static_1">
            static 默認值，沒有定位，元素出現在正常的文檔流中，相當于取消定位屬性或者不設置定位屬性。
        </div>
    </div>
</body>
</html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143復制代碼類型：[html]
          制作一個彈框效果： 
          「鏈接」
          、普通定位和相對定位
          css中的元素有兩種元素，塊級元素和行級元素，塊級元素每定義一個，第二個會自動換行，行級元素不會換行。如下圖定義了三個塊級元素div和兩個行級元素span。
          普通定位就是從上到下從左到右依次排布的布局。
          普通定位代碼
          普通定位顯示效果
          相對定位是在普通定位的基礎上作出一些變動，如本來這個元素應該在第二行的位置，設置position:relative,bottom:20px;他就會在原來普通定位中應處于的位置的基礎上距離底部上浮20px;
          他的位置浮動會使他的位置變化，但是他原本處于的文檔空間不會改變。
          比如相對定位使得本在第二行的元素div上浮了一行的高度，則他會和本來在第一行的元素疊加，但是他在第二行的位置還是會空在那里，下一個塊級元素會從第三行開始布局。代碼和效果如圖
          相對定位代碼
          相對定位效果
          二、絕對定位和fixed定位
          這兩種定位都不占據文檔空間，所以如果是普通流的元素遇到這些定位的元素會產生疊加情況。浮動元素也不占據文檔空間
          絕對定位是相對最近一個已經定位的祖先元素定位的，如果最近沒有定位的祖先元素，則根據根元素定位。可以用來做提示框或者下拉搜索框。
          代碼和效果如圖
          絕對定位代碼
          絕對定位效果
          上圖可以看出
          1、第一個空白背景框的div的祖先元素td已經使用了相對定位，雖然位置沒有便宜，但是他的絕對定位是在哪個td元素的基礎上進行定位的。
          2、666的定位也是絕對定位，但是他沒有已經定位的祖先元素，所以他的絕對定位是相對于根元素定位的。
          3、空白框元素雖然占了很大的空間，但是背景灰色并沒有鋪滿他所占的高度，這就是不占據文檔空間，反觀上面的普通定位和相對定位，都鋪滿了內含元素的背景。
          fixed元素就是固定在瀏覽器某個位置的元素，絕對定位是固定在頁面的，如果滾動滾動條的話絕對定位的元素也會滾上去，fixed元素不會。
          通常用來寫導航條或者回到頂部等。代碼和效果如圖。
          fixed定位代碼
          fixed定位效果
          三、浮動定位
          浮動定位同樣不占據文檔空間，所以背景也不會鋪滿，下面例子中可以看出來。
          浮動定位代碼
          浮動定位效果
          1、浮動定位不占據空間
          2、浮動定位會從左到右(這是左浮動，右浮動相反)依次排布，如果行寬不夠則換行。換行的過程中如果左側依然有元素占據，如下面的框1，則234會依次占據右側空間。
          SS中通常使用position 屬性，決定元素的定位方式。
          常用的定位方式通常有
          值
          意義
          relative
          相對定位
          absolute
          絕對定位
          fixed
          固定定位

          相對定位
          position 設置為 relative。
          相對定位是元素相對于自己原來的位置通過使用top、left 等屬性進行移動，使其顯示在新的位置上。
          相對定位的元素雖然移動了，但是之前的位置并沒有放棄，同時也不會搶占移動后原有元素的位置(但會對原有位置的元素進行壓蓋)。
          相對定位通常用來微調元素位置；而且相對定位可以作為下面要講的絕對定位的參考坐標。
          屬性
          值
          作用
          top
          像素、百分比等
          相對原來位置，距離上邊移動距離，可以為負值
          left
          像素、百分比等
          相對原來位置，距離左邊移動距離，可以為負值
          right
          像素、百分比等
          相對原來位置，距離右移動距離，可以為負值
          bottom
          像素、百分比等
          相對原來位置，距離下邊移動距離，可以為負值。

          相對定位舉例

          像素描述位置
          box2 開啟了相對定位，在新的位置得到了渲染。

          <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>相對定位概念</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }


      p {
        width: 100px;
        height: 100px;
        background-color: orange;
        border: 1px solid #000;
      }


      .box2 {
        position: relative;
        top: 102px;
        left: 102px;
      }
</style>
  </head>
  <body>
    <p></p>
    <p class="box2"></p>
    <p></p>
  </body>
</html>

          百分比形式
          如果在相對定位中， top、left、bottom、right 寫成百分比的形式，表示他們在父容器內所顯示的百分比位置。
          舉例
          父元素寬高均200px。開啟子元素相對定位，則子元素位置如下。

          <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>相對定位概念</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        margin: 40px auto;
      }


      p {
        position: relative;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        background-color: orange;
      }
</style>
  </head>
  <body>
    <div>
      <p></p>
    </div>
  </body>
</html>

          絕對定位
          position 設置為 absolute。
          絕對定位的元素在瀏覽器中擁有絕對位置，可以通過坐標進行描述。
          絕對定位的元素脫離標準文檔流，釋放了自己本來應該在的地方的位置；同時會在新的位置上對其他元素進行壓蓋。
          絕對定位的元素會在自己祖先元素中尋找擁有定位屬性的元素作為參考點。這個祖先元素通常是相對定位的。
          絕對定位的元素如果找不到擁有定位屬性的祖先元素作為參考點，則相對于 IBC（初始包含塊，可以認為是HTML根元素）定位。

          屬性
          值
          作用
          top
          像素、百分比等
          相對參考點位置，距離參考點上邊移動距離，可以為負值
          left
          像素、百分比等
          相對參考點位置，距離參考點左邊移動距離，可以為負值
          right
          像素、百分比等
          相對參考點位置，距離參考點右邊移動距離，可以為負值
          bottom
          像素、百分比等
          相對參考點位置，距離參考點下邊移動舉例，可以為負值。
          舉例

          參考點IBC
          參考點是IBC,此時的top、left、bottom、right都是通過HTML跟節點來描述元素的位置。
          <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>絕對定位釋放自己位置的示例</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 200px;
        height: 200px;
      }
      .box1 {
        background-color: orange;
      }
      .box2 {
        background-color: green;
        position: absolute;
        top: 230px;
        left: 200px;
      }
      .box3 {
        background-color: blue;
      }
</style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <ul>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
    </ul>
  </body>
</html>

          參考點是定位元素
          最經典的就是，父節點開啟相對定位， 子元素開啟絕對定位；此時的top、left、bottom、right都是通過父元素的位置描述子元素。
          <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>子絕父相</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        width: 402px;
        height: 402x;
        border: 1px solid #000;
        padding: 100px;
        margin: 0 auto;
        position: relative;
      }


      .box2 {
        width: 200px;
        height: 200px;
        padding: 50px;
        border: 1px solid #000;
        position: relative;
      }


      .box3 {
        width: 50px;
        height: 50px;
        border: 1px solid #000;
        position: absolute;
        top: 0px;
        left: 0px;
        background-color: orange;
      }
</style>
  </head>
  <body>
    <div class="box1">
      <div class="box2">
        <div class="box3">dual</div>
      </div>
    </div>
  </body>
</html>

          固定定位
          position 設置為 fixed。
          不管頁面如何下拉，元素永遠固定在一個位置。
          固定定位只以頁面為參考點，并且同樣也脫離了標準的文檔流。
          固定定位用途：
          1. 用于 頁面內容比較長，返回頂部功能等。
          2. 用于 制作CSS精靈 (現在很少用了)


          <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位demo</title>
    <style>
        .box {
            position: fixed;
            top: 100px;
            left: 100px;
            width: 100px;
            height: 100px;
            background-color: red;
        }


        body {
            height: 100000px;
        }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

          層疊屬性
          對于上述說的定位元素，他們都有可能壓蓋到渲染后的位置上的原有元素。某些場景下我們不希望此事發生。
          此時就用到了 z-index屬性。它的值是一個正整數， 值越大會越在上面顯示。
          <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>z-index屬性演示</title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            background-color: orange;
            position: absolute;
            top:100px;
            left: 100px;
            z-index: 2;
        }


        .box2 {
            width: 300px;
            height: 300px;
            background-color: green;
            position: absolute;
            z-index: 10;
        }
</style>
</head>
<body>


    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

          總結
          相對定位：相對于自己原來的位置進行定位。
          絕對定位：選一個參考點進行定位。參考點可以是擁有定位屬性的祖先元素，如果找不到，則為IBC。
          固定定位：在頁面（可視化的屏幕）的固定位置，不隨著頁面滾動而滾動。
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
大伊香蕉精品一区视频在线|
中文字幕亚洲一区二区va在线|
成人在线一区二区|
无码精品不卡一区二区三区|
日韩视频免费一区二区三区|
性色AV 一区二区三区|
日韩精品一区二区三区影院
|
亚洲一区综合在线播放|
中文字幕日韩欧美一区二区三区|
丰满人妻一区二区三区免费视频|
亚洲午夜在线一区|
在线观看国产一区|
女同一区二区在线观看|
精品aⅴ一区二区三区|
一区二区三区免费视频网站|
色综合视频一区中文字幕|
亚洲欧洲一区二区|
无码日韩精品一区二区免费暖暖|
一区三区三区不卡|
国产精品亚洲高清一区二区|
国产福利在线观看一区二区|
日本精品一区二区三区视频|
无码人妻啪啪一区二区|
国产精品视频一区二区猎奇|
亚洲一区二区三区播放在线|
美女毛片一区二区三区四区|
无码一区二区三区老色鬼|
亚洲AV无码一区东京热久久|
寂寞一区在线观看|
亚欧成人中文字幕一区|
亚洲AV日韩AV天堂一区二区三区|
免费视频精品一区二区三区|
福利一区二区三区视频在线观看|
国产爆乳无码一区二区麻豆
|
国产大秀视频在线一区二区|
国产精品久久一区二区三区|
国产99视频精品一区|
日本一区二三区好的精华液|
国产一区二区在线观看|
视频一区在线免费观看|
国产精品亚洲高清一区二区|