建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要為大家展示了“html5定位的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“html5定位的示例分析”這篇文章吧。
成都創(chuàng)新互聯(lián)公司專注于分宜企業(yè)網站建設,成都響應式網站建設公司,成都商城網站開發(fā)。分宜網站建設公司,為分宜等地區(qū)提供建站服務。全流程按需制作，專業(yè)設計，全程項目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務
定位
position屬性
static：默認值，沒有定位
relative：相對定位
absolute：絕對定位
fixed：固定定位
標準文檔流
標準文檔流:是指頁面上從上到下,從左到右,網頁元素一個挨一個的簡單的正常的布局方式。
一般在HTML元素分為兩種：塊級元素和行內元素。像div,p這些的元素屬于塊級元素，塊級元素是從上到下一行一行的排列；默認一個塊級元素會占用一行，而跟在后面的元素會另起一行排列；
行內元素是在一行中水平布置，從左到右的排列；span,strong等屬于行內元素。
TitleDocument
我是塊級元素，我單獨占一行 我單獨占一行 我單獨占一行
我是塊級元素，我一行一行的排列，我一行一行的排列，我一行一行的排列
我的行內元素，我水平的排列，我水平的排，我水平的排，我水平的排列，我水平的排列
我是行內元素，沒有那么霸道，沒有那么霸道，沒有那么霸道，沒有那么霸道，沒有那么霸道
static定位
position:static
元素沒有定位，以標準流方式顯示
position屬性
第一個盒子
第二個盒子
第三個盒子
@charset "gb2312";
div {
width: 300px;
margin:10px;
padding:5px;
font-size:12px;
line-height:25px;
}
#father {
width: 500px;
margin: 50px auto;
border:1px #666 solid;
padding:10px;
}
#first {
background-color:#FC9;
border:1px #B55A00 dashed;
}
#second {
background-color:#CCF;
border:1px #0000A8 dashed;
}
#third {
background-color:#C5DECC;
border:1px #395E4F dashed;
}
相對定位
relative屬性值
相對自身原來位置進行偏移
偏移設置：top、left、right、bottom可以用left來描述盒子向右移動；
可以用right來描述盒子向左的移動；
可以用top來描述盒子向下的移動；
可以用bottom來描述盒子的向上的移動；
如果是負數就是相反的方向。
相對定位的盒子，不脫離標準流，老家保留位置，其后的元素不能占用其原有位置。
相對定位的主要用途是作為其內部元素絕對定位時的參照標準，有相對于我之義。
position屬性
第一個盒子
第二個盒子
第三個盒子
@charset "gb2312";
div {
width: 300px;
margin:10px;
padding:5px;
font-size:12px;
line-height:25px;
}
#father {
width: 500px;
margin: 50px auto;
border:1px #666 solid;
padding:10px;
}
#first {
background-color:#FC9;
border:1px #B55A00 dashed;
position:relative;
top:10px;
left:50px;
}
#second {
background-color:#CCF;
border:1px #0000A8 dashed;
}
#third {
background-color:#C5DECC;
border:1px #395E4F dashed;
}
絕對定位
absolute屬性值
偏移設置： left、right、top、bottom
使用了絕對定位的元素以它最近的一個“已經定位”的“祖先元素” 為基準進行偏移。如果沒有已經定位的祖先元素，那么會以瀏覽器窗口為基準進行定位。絕對定位的元素從標準文檔流中脫離，其后的元素會占據其原有的位置。
以上是“html5定位的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網站名稱：html5定位的示例分析
分享路徑：http://fisionsoft.com.cn/article/gsgiep.html
