position屬性值static、relative、absolute、fixed作用
程式碼例項:
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>example</title>
<style type="text/css">
img{
width: 40px;
height: 40px;
top: 5px;
left: 150px;
border: thin solid black;
}
</style>
</head>
<body>
<p>
there are lots of differnt kinds of fruit.there are over 500 varieties of bananas alone.by the time we add the countless types of apples,oranges,and other well-known fruit,we are faced with thousands of choices.
</p>
<p>
there are lots of differnt kinds of fruit.there are over 500 varieties of bananas alone.by the time we add the countless types of apples,oranges,and other well-known fruit.
</p>
<img id="caomei" src="img/4d0df8064383e78d74e07014e7ccd0ee.jpg" />
<p>
there are lots of differnt kinds of fruit.there are over 500 varieties of bananas alone.
</p>
<p>
there are lots of differnt kinds of fruit.
</p>
<button>static</button>
<button>relative</button>
<button>abosolute</button>
<button>fixed</button>
<script type="text/javascript">
var buttons=document.getElementsByTagName("button");
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=function(e){
document.getElementById("caomei").style.position=e.target.innerHTML;
}
}
</script>
</body>
</html>
按下static時圖片的位置:
按下relative按鈕時圖片的位置
按下fixed按鈕後圖片的位置:
按下absolute按鈕時,圖片先前位置是什麼,之後位置不變。
結論:由這個例子,可以看出,static的位置在第三,四兩個段落中間,在程式所寫的位置。
reletive的位置是按照static所處的位置,根據css而改變位置。
fixed則是根據瀏覽器左上角位置,根據css而改變位置。
至於absolute,由於沒有參照物,會和之前的位置保持不變。
相關推薦
position屬性值static、relative、absolute、fixed作用
程式碼例項: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>example</title>
css position屬性( static relative absolute fixed)
position屬性有4種不同型別的定位,分別是static、relative、absolute和fixed。 static:元素正常生成,塊級元素作
CSS position 屬性值:
font dex bottom left 沒有 屬性 生成 static 繼承 1.absolute:生成絕對定位的元素,相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定
css中position屬性值的區別
字母 列表 evel 所有 img pos ocs ima sele 1.relative 元素相對自身的原位置偏移某個距離,但是原本的空間依舊保留,表現為空白 2.absolute 原來的元素空間被刪除,新生成一個塊級框,與頁面內容相對靜止,如果頁面向下滑動
css中的position屬性值的探究
css的position屬性指定了元素的定位型別,然後通過top,botton,left,right來具體定位。 在具體定位之前必須使用position屬性,否則所有的具體定位屬性都無法生效。 position可選擇的值一共五個:static ,relative,absolute,fixed,或sticky。
position屬性值(面試必考)
相對定位(relative)、絕對定位(absolute)和z-index屬性 position屬性同樣可以實現和float屬性一樣的效果,其主要被運行於網頁佈局上。 它主要提供static, relative, absolute和fixed四個值。
CSS3新增的position屬性值sticky介紹
CSS3不久前新增了position的屬性值,sticky。 設定了sticky的元素,在螢幕範圍(viewport)時該元素的位置並不受到定位影響,該在哪裡就是哪裡(設定是top、left等屬性無效)。但是,當該元素的位置將要移出螢幕範圍時,定位又會變成fixed,根據設
CSS中display/float/position屬性值的相互影響
有3個屬性和佈局以及box的建立有關:'display', 'position' 和 'float',彼此互動作用如下:如果'display'值為'none',則'position' 和 'float'無作用。這種情況下,不生成box。否則,如果'position'值為'ab
Position屬性四個值:static、fixed、absolute和relative的區別
區別 出現 進行 blog index ont 屬性 -i 通過 1、static(靜態定位):默認值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)。 2、relative(相對定位):生成相對定位的元
Position屬性四個值:static、fixed、absolute和relative的區別和用法 Position屬性四個值:static、fixed、absolute和relative的區別和用法
Position屬性四個值:static、fixed、absolute和relative的區別和用法 在用CSS+DIV進行佈局的時候,一直對position的四個屬性值relative,absolute,static,fixed分的不是很清楚,以致經常會出現讓人很鬱悶的結果。今天研究了一下,總算有所瞭解。
Position屬性四個值:static、fixed、absolute和relative的區別和用法
靜下心來慢慢讀,讀完一定會有所收穫的 static(靜態定位):預設值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 宣告)。 relative(相對定位):生成相對定位的元素,通過top,bottom,left,right的設定相對於其正常
css position: inherit、static、relative、absolute和fixed
inherit: 規定應該從父元素繼承 position 屬性的值。 static: 預設值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 宣告,z-index只對absolute、fixed有效,預設為0)。
CSS中position屬性( absolute | relative | static | fixed )詳解
ack 關系 tail 而且 tools css bar 簡單 tag 我們先來看看CSS3 Api中對position屬性的相關定義: static:無特殊定位,對象遵循正常文檔流。top,right,bottom,left等屬性不會被應用。 relative:對象遵
布局模型 之 層模型(position的relative、absolute與fixed區別?)
absolute fixed relative css的布局模型分為流動模型(Flow)、浮動模型(Float)、層模型(Layer)。 浮動模型(Float)和層模型(Layer)有什麽顯著區別? 浮動模型(Float):浮動是讓某元素脫離文檔流的限制,在浮動框之前和之後的非定位元素
CSS的position之absolute、fixed和relative區別
abs 當前 splay body left position borde ati aud 首先,我們應了解position的默認值——static static 默認值,沒有定位,元素出現在正常的流中,即忽略 top, bottom, left, right 或者 z-
position屬性( absolute | relative | static | fixed )詳解
一,什麼是文件流 將窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即為文件流。 只有三種情況會使得元素脫離文件流,分別是:浮動、絕對定位和相對定位。 二,定位分類 靜態定位(static) html元素預設的定位方式,top, right, bot
【唯一講明白的】CSS中position屬性( absolute | relative | static | fixed )詳解
static:無特殊定位,物件遵循正常文件流。top,right,bottom,left等屬性不會被應用。 relative:物件遵循正常文件流,但將依據top,right,bottom,left等屬性在正常文件流中偏移位置。而其層疊通過z-index屬性定義。 absolute:物件脫離正常文件流,使用t
HTML中的佈局方式:absolute、relative、fixed、static
在CSS中關於定位的內容是: position:relative | absolute | static | fixed static(靜態) 沒有特別的設定,遵循基本的定位規定,不能通過z-
absolute、relative,toggle()
data- ive -m note -a inline log relative art 測試代碼例如以下: <div> <div class="global">不應用樣式<
js中的innerText、innerHTML、屬性值、value與jQuery中的text()、html()、屬性值、val()總結
att text color btn col class 屬性 fun value js與jQuery獲取text、html、屬性值、value的方法是不一樣的。 js與jQuery,text與innerText獲取(<!---->中為結果) html: