position屬性

時間 2019-11-26

標籤 position 屬性欄目 CSS 简体版

原文原文鏈接

position這個屬性定義創建元素佈局所用的定位機制。任何元素均可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素自己是什麼類型。相對定位元素會相對於它在正常流中的默認位置偏移。

絕對定位sbsolute:生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

<style>
h2#wa
{
position:absolute;
left:100px;
top:150px;}
	</style>

</head>
<body>
	<h2 id="wa">這是一個帶有絕對定位的標題</h2>
	<p>經過絕對定位，元素能夠放置到頁面上的任何位置。下面的標題距離頁面左側 100px，距離頁面頂部 150px。</p>
</body>

下圖所示瀏覽器

相對定位relative：生成相對定位的元素，相對於其正常位置進行定位。所以，"left:20" 會向元素的 LEFT 位置添加 20 像素。

h2#wa
{
position:relative;
left:100px;
top:150px;}
	</style>

</head>
<body>
	<h2 id="wa">這是一個帶有絕對定位的標題</h2>
	<p>經過絕對定位，元素能夠放置到頁面上的任何位置。下面的標題距離頁面左側 100px，距離頁面頂部 150px。</p>
</body>

以下所示：佈局

fixed:生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規

p.one
{
position:fixed;
left:5px;
top:5px;
}
p.two
{
position:fixed;
top:30px;
right:5px;
	</style>
</head>
<body>
	<p class="one">一些文本。</p>
    <p class="two">更多的文本。</p>

以下所示：blog

本例演示如何設置元素的形狀。此元素被剪裁到這個形狀內，並顯示出來。

img 
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}
	</style>
</head>
<body>
<p>clip 屬性剪切了一幅圖像：</p>
<p><img border="0" src="1.jpg" width="120" height="151"></p>
</body>

以下所示繼承

絕對定位的優先級：Z-index可被用於將在一個元素放置於另外一元素以後，或者是前面。

img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
	</style>
</head>
<body>
<h1 style="color:red">這是一個標題</h1>
<img class="x" src="1.jpg" /> 
<h2 style="color:red">默認的 z-index 是 0。Z-index -1 擁有更低的優先級。</h2>

以下所示ip

默認值static：默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

繼承元素inherit：規定應該從父元素繼承 position 屬性的值。

1. CSS position屬性、float屬性
2. CSS position 屬性
3. position屬性
4. background-position屬性
5. css的position屬性
6. CSS中Position屬性
7. position屬性詳解
8. CSS 之 Position 屬性
9. position 的屬性值
10. CSS 佈局的position屬性、float屬性
更多相關文章...
• WebSecurity 屬性 - CurrentUserName - ASP.NET 教程
• WebSecurity 屬性 - HasUserId - ASP.NET 教程
• JDK13 GA發佈：5大特性解讀
• 互聯網組織的未來：剖析GitHub員工的任性之源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。