亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 29
粉絲 1
評論 0
訪問量 22153
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
絕對定位和固定定位的區(qū)別
Pharaoh
原創(chuàng)
816人瀏覽過

定位基礎(chǔ)

  • 基礎(chǔ)術(shù)語
    • 定位元素：使用了position: relative / absolute / fixed的元素
    • 最初包含塊：html標(biāo)簽的父級，是看不見的，大多數(shù)情況下與瀏覽器視口表現(xiàn)一致，但不相同
    • 參照物：元素自身，祖先定位元素，最初包含塊
  • 定位類型
    • 相對定位：relative
    • 絕對定位：absolute
    • 固定定位：fixed
    • 靜態(tài)定位：static（默認(rèn)）
    • 粘性定位：sticky
  • 各種定位參照物
    • 相對定位：參照自身在文檔流中的位置來定位
    • 絕對定位：參照定位父級元素，如果沒有就會找到最初包含塊來定位
    • 固定定位：參照最初包含塊來定位
    • 粘性定位：參照瀏覽器視口

絕對定位和固定定位的相同點

  • 都脫離了文檔流

絕對定位和固定定位的不同點

  • 絕對定位參照父級，如果父級不是定位元素會一直向上找，如果沒找到，就會找到最初含塊
  • 固定定位參照的最初包含塊瀏覽器視口
  • 固定定位會固定在瀏覽器的某個位置

實例

絕對定位

以圣杯布局為例
通過外邊距的負(fù)值和絕對定位修改左右邊欄的位置，把內(nèi)容區(qū)擠在中間

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>圣杯布局</title>
  8.     <link rel="stylesheet" href="shengbei.css" />
  9.   </head>
  10.   <body>
  11.     <div class="container">
  12.       <div class="main">
  13.         消息：關(guān)心海洋、認(rèn)識海洋、經(jīng)略海洋！中國經(jīng)濟(jì)的騰飛，與海洋密不可分。黨的十八大以來，習(xí)近平總書記高度重視海洋工作，關(guān)心海洋事業(yè)發(fā)展。在中國航海日之際，央視網(wǎng)系列創(chuàng)意微視頻《非凡十年》，邀您一起來看中國航海的奮進(jìn)之路。
  14.       </div>
  15.       <div class="left">左</div>
  16.       <div class="right">右</div>
  17.     </div>
  18.   </body>
  19. </html>
  20. /* CSS文件 */
  21. .container {
  22.   width: 1000px;
  23.   min-height: 600px;
  24.   overflow: hidden;
  25.   margin: auto;
  26.   padding: 0 200px;
  27.   position:relative;
  28. }
  29. .main,
  30. .left,
  31. .right {
  32.   float: left;
  33.   min-height: 600px;
  34. }
  35. .main {
  36.   width: 100%;
  37.   background-color: coral;
  38. }
  39. .left {
  40.   width: 200px;
  41.   margin-left: -100%;
  42.   background-color: yellow;
  43.   position: absolute;
  44.   left: -200px;
  45. }
  46. .right {
  47.   width: 200px;
  48.   margin-left: -200px;
  49.   background-color: yellow;
  50.   position: absolute;
  51.   right: -200px;
  52. }

固定定位

把二維碼放在網(wǎng)頁的右側(cè)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>圣杯布局</title>
  8.     <link rel="stylesheet" href="shengbei.css" />
  9.   </head>
  10.   <body>
  11.     <div class="container">
  12.       <div class="main">
  13.         消息：關(guān)心海洋、認(rèn)識海洋、經(jīng)略海洋！中國經(jīng)濟(jì)的騰飛，與海洋密不可分。黨的十八大以來，習(xí)近平總書記高度重視海洋工作，關(guān)心海洋事業(yè)發(fā)展。在中國航海日之際，央視網(wǎng)系列創(chuàng)意微視頻《非凡十年》，邀您一起來看中國航海的奮進(jìn)之路。
  14.       </div>
  15.       <div class="left">左</div>
  16.       <div class="right">右</div>
  17.     </div>
  19.     <div class="qr"><img src="dy.png" alt="douyin" /></div>
  20.   </body>
  21. </html>
  23. /* CSS文件 */
  25. .container {
  26.   width: 600px;
  27.   min-height: 600px;
  28.   overflow: hidden;
  29.   margin: auto;
  30.   padding: 0 200px;
  31. }
  33. .main,
  34. .left,
  35. .right {
  36.   float: left;
  37.   min-height: 600px;
  38. }
  40. .main {
  41.   width: 100%;
  42.   background-color: coral;
  43. }
  44. .left {
  45.   width: 200px;
  46.   margin-left: -100%;
  47.   background-color: yellow;
  48.   position: relative;
  49.   left: -200px;
  50. }
  51. .right {
  52.   width: 200px;
  53.   margin-left: -200px;
  54.   background-color: yellow;
  55.   position: relative;
  56.   right: -200px;
  57. }
  59. .qr img {
  60.   width: 100px;
  61. }
  63. .qr {
  64.   position: fixed;
  65.   right: 0;
  66.   top: 400px;
  67. }

批改老師：PHPzPHPz

批改狀態(tài)：合格

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費學(xué)