次我們來說一下,HTML網頁中的定位,有很多小伙伴一定好奇,為什么我們寫的代碼都是按順序羅列的而在網頁的展示效果中,我們的各種樣式,標簽,圖片等東西都是出現在網頁的各個位置,網頁看起來很美觀,各種盒模型擺放合理,這是因為在HTML中有定位的能力,今天我們就來學習一下。
position在英語中是位置的意思,而在我們CSS代碼中position也是跟位置有關的,position有三個屬性值分別為relative(相對定位:相對于自己原來的位置進行定位,但保留自己原來的位置,別的元素無法占用),absolute(絕對定位:相對于有定位的父級進行定位,如果沒有則相對于文檔進行定位,定位會脫離文檔,不保留原來的位置,會和原來的文檔不在一個層),fixed(位置定位:他的位置不會隨著滑輪的滾動而改變較常見于彈窗廣告,他也會脫離文檔流)。
我們說完了position,接下來我們就說說他是怎么進行定位的,我們有left,top,right,bottom,五個屬性分別對應 距左邊,距上邊,距右邊,距下邊,大家注意到我在每個方向前都加了個距字,我們所做的定位是距各個方向的距離而不是移動,例:left:200px,是向右移動200像素,他的意思是距離左邊增加200像素。在我們實際的編程中一般都不常用bottom,我們知道,滑輪是可以一直往下滑的,所以我們相對于底部定位的話就很困難。
我們來通過代碼和結果來看一下:
沒有定位的樣式
加了relative
加了relative的結果
上面這個結果圖看著比例不太對是因為作者截圖沒截好[捂臉]
我們可以看出貓圖片并沒有移動,而是給兔子圖片留著位置。
加了absolute
加了absolute的結果
這個結果我們可以看出貓圖片向前移動了,并沒有保留兔子圖片原來的位置
加了fixed
代碼中的<br>是為了使滑輪可以滑動,以便更好的展示效果。
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
用了fixed的效果展示。
以上的代碼樣式只對兔子圖片起作用,我沒有給貓添加任何樣式,貓圖片只是作為參照物。
CSS定位屬性允許你為一個元素定位。它也可以將一個元素放在另一個元素后面,并指定一個元素的內容太大時,應該發生什么。
元素可以使用的頂部,底部,左側和右側屬性定位。然而,這些屬性無法工作,除非是先設定position屬性。他們也有不同的工作方式,這取決于定位方法。
HTML元素的默認值,即沒有定位,元素出現在正常的流中。
靜態定位的元素不會受到top, bottom, left, right影響。
元素的位置相對于瀏覽器窗口是固定位置。
即使窗口是滾動的它也不會移動:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=640, user-scalable=no">
<head>
<style>
p.pos_fixed {
position: fixed;
top: 30px;
right: 5px;
}
</style>
</head>
<body>
<p class="pos_fixed">Some more text</p>
<p><b>Note:</b> 代碼使人進步!!!.</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</body>
</html>
注意:
Fixed定位使元素的位置與文檔流無關,因此不占據空間。
Fixed定位的元素和其他元素重疊。
相對定位元素的定位是相對其正常位置。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=640, user-scalable=no">
<title> 定位</title>
<head>
<style>
h2.pos_left {
position: relative;
left: -20px;
}
h2.pos_right {
position: relative;
left: 20px;
}
</style>
</head>
<body style="background-color:azure;">
<p>Some more text</p>
<p><b>Note:</b> 代碼使人進步!!!.</p>
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
<h2 class="pos_right">This heading is moved right according to its normal position</h2>
</body>
</html>
可以移動的相對定位元素的內容和相互重疊的元素,它原本所占的空間不會改變。
h2.pos_top{
position:relative;
top:-50px;
}
相對定位元素經常被用來作為絕對定位元素的容器塊。
絕對定位的元素的位置相對于最近的已定位父元素,如果元素沒有已定位的父元素,那么它的位置相對于<html>:
h2{
position:absolute;
left:100px;
top:150px;
}
Absolutely定位使元素的位置與文檔流無關,因此不占據空間。
Absolutely定位的元素和其他元素重疊。
元素的定位與文檔流無關,所以它們可以覆蓋頁面上的其它元素
z-index屬性指定了一個元素的堆疊順序(哪個元素應該放在前面,或后面)
一個元素可以有正數或負數的堆疊順序:
img{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。
注意: 如果兩個定位元素重疊,沒有指定z - index,最后定位在HTML代碼中的元素將被顯示在最前面。
本文基于Html基礎,主要介紹了CSS中四種定位的方式。對于四種的定位表現形式,用豐富的案例 ,代碼效果圖的展示,幫助大家更好理解 。
最后,希望可以幫助大家更好的學習CSS3。
前面文章中寫過類似的文章《手把手教你HTML5實現根據LBS定位到商家兩點之間距離多少》,建議有興趣的小伙伴可以看看。
各種瀏覽器對HTML5 Geolocation 的支持
瀏覽器 版本 只支持HTTPS版本 IE 9+ - Edge 12+ - Firefox 3.5+ - Chrome 5+ 50+ Safari 5+ 39+ iOS Safari 3.2+ 10.2+ Android Browser 2.1+ 56+ Chrome for Android 57+ 57+ UC Browser for Android 11.4+ -
出于安全考慮,部分瀏覽器只允許通過HTTPS協議使用 Geolocation API。在HTTP協議下使用Geolocation API 瀏覽器會拋出異常,在開發階段,127.0.0.1和localhost 等本地域在兩種協議下均可使用。
Geolocation API 通過 navigator.geolocation 全局對象進行訪問,第一次訪問的時候會詢問用戶是否允許共享位置。
判斷瀏覽器是否支持 Geolocation API
// 判斷瀏覽器屬否支持獲取位置
if(navigator.geolocation){
console.log("可以獲取");
}else{
console.log("不支持");
}
實例代碼如下:
<!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>Document</title>
</head>
<body>
獲取用戶地理位置
<input type="button" value="點擊獲取位置" id="btn">
<script>
let btnBtn = document.getElementById('btn')
btnBtn.onclick = () => { // 點擊事件
getAdd()
}
// 成功回調
let success = (position) => {
console.log(`獲取位置成功:${position.coords}`);
console.log(position.coords); // 獲取坐標信息
// coords的常用屬性
console.log(position.coords.latitude); // 獲取坐標緯度
console.log(position.coords.longitude); // 獲取坐標經度
console.log(position.coords.accuracy); // 獲取坐標精度,單位為米
console.log(position.timestamp); // 獲取位置的時間戳
}
// 失敗回調
let error = (positionErr) => {
console.log(`獲取位置失敗:${positionErr.code}+${positionErr.message}`);
}
let options = {
enableHightAccuracy: false, // 獲取高精度的位置信息,可能會增加響應時間,默認是false
timeout: 30000, // 設置超時時間,單位毫秒,如果到達設定的時間沒獲取到信息則回觸發失敗回調,默認值為0,無限大
maximumAge: 0 // 設置用戶位置信息緩存的最大時間
}
let getAdd = () => {
navigator.geolocation.getCurrentPosition(success, error, options)
}
// 判斷瀏覽器屬否支持獲取位置
if(navigator.geolocation){
console.log("可以獲取");
}else{
console.log("不支持");
}
</script>
</body>
</html>
當獲取位置失敗時,會調用失敗回調(error函數)。返回的參數<positionErr.code 標識錯誤的原因><positionErr.message錯誤信息描述> positionErr.code 值
《手把手教你HTML5實現根據LBS定位到商家兩點之間距離多少》
作者:藍海00
鏈接:https://www.jianshu.com/p/d0b0b6120055
*請認真填寫需求信息,我們會在24小時內與您取得聯系。