欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

使用css定位html元素的方法-創(chuàng)新互聯(lián)

使用css定位html元素的方法？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

成都網(wǎng)站建設(shè)、網(wǎng)站制作介紹好的網(wǎng)站是理念、設(shè)計(jì)和技術(shù)的結(jié)合。成都創(chuàng)新互聯(lián)擁有的網(wǎng)站設(shè)計(jì)理念、多方位的設(shè)計(jì)風(fēng)格、經(jīng)驗(yàn)豐富的設(shè)計(jì)團(tuán)隊(duì)。提供PC端+手機(jī)端網(wǎng)站建設(shè)，用營(yíng)銷思維進(jìn)行網(wǎng)站設(shè)計(jì)、采用先進(jìn)技術(shù)開源代碼、注重用戶體驗(yàn)與SEO基礎(chǔ)，將技術(shù)與創(chuàng)意整合到網(wǎng)站之中，以契合客戶的方式做到創(chuàng)意性的視覺化效果。

要在元素上使用定位，必須首先聲明其位置property，該位置指定用于元素的定位方法的類型。使用position屬性值，使用top，bottom，left和right屬性定位元素。它們的位置也取決于它們的位置值。（推薦課程：css視頻教程）

定位值有五種類型：static（靜態(tài)的）、relative（相對(duì)的）、fixed（固定的）、absolute（絕對(duì)的）、sticky（黏性的）

static（靜態(tài)的）

默認(rèn)情況下，HTML元素定位為靜態(tài)，元素根據(jù)文檔的正常流程定位; 靜態(tài)定位元素不受頂部，底部，左側(cè)和右側(cè)屬性的影響。一個(gè)元素用position: static定位不會(huì)有其他特殊的定位方式。

用于將位置設(shè)置為靜態(tài)的CSS是：

position: static;

接下來是使用靜態(tài)位置值的示例：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: WHITE;
  font:  Helvetica;
  width: 420px;
}
.square-set,
.square {
  border-radius: 15px;
}
.square-set {
  background: darkgrey;
}
.square {
  position: static;
  background: Green;
  height: 70px;
  line-height: 40px;
  text-align: center;
  width: 90px;
}
</style>
</head>
<body>
<div class="square-set">
  <figure class="square square-1">SQUARE 1</figure>
  <figure class="square square-2">SQUARE 2</figure>
  <figure class="square square-3">SQUARE 3</figure>
  <figure class="square square-4">SQUARE 4</figure>
</div>
</body>
</html>

效果如下：

使用css定位html元素的方法

relative（相對(duì)的）

該元素根據(jù)文檔的正常流動(dòng)位于相對(duì)于它的正常位置被定位，然后偏移相對(duì)于本身的基于上，右，下和左的值。偏移量不會(huì)影響任何其他元素的位置; 因此，頁面布局中為元素給出的空間與位置是靜態(tài)的相同。設(shè)置相對(duì)定位元素的頂部，右側(cè)，底部和左側(cè)屬性將使其遠(yuǎn)離其正常位置進(jìn)行調(diào)整。其他內(nèi)容不會(huì)被調(diào)整以適應(yīng)元素留下的任何空白。

用于將位置設(shè)置為相對(duì)的CSS是：

position: relative;

以下示例使用相對(duì)位置值：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: white;
  font:   Helvetica ;
  width: 420px;
}
.square-set,
.square {
  border-radius: 15px;
}
.square-set {
  background: darkgrey;
}
.square {
  background: green;
  height: 70px;
  line-height: 40px;
  position: relative; 
  text-align: center;
  width: 80px;
}
.square-1 {
    top: 15px;
  }
.square-2 {
  left: 50px;
}
.square-3 {
  bottom: -23px;
  right: 30px;
}
</style>
</head>
<body>
<div class="square-set">
  <figure class="square square-1">SQUARE 1</figure>
  <figure class="square square-2">SQUARE 2</figure>
  <figure class="square square-3">SQUARE 3</figure>
  <figure class="square square-4">SQUARE 4</figure>
</div>
</body>
</html>

效果如下：

使用css定位html元素的方法

absolute（絕對(duì)的）

該元素將從普通文檔流中刪除，并且在頁面布局中，不會(huì)為該元素創(chuàng)建空間。元素相對(duì)于最近定位的祖先定位，如果有的話; 否則，它相對(duì)于初始包含塊放置，其最終位置由頂部，右側(cè)，底部和左側(cè)的值確定。

用于將位置設(shè)置為絕對(duì)的CSS是：

position: absolute;

具有position: absolute; 相對(duì)于最接近的祖先定位的元素。如果絕對(duì)定位元素沒有定位祖先，它將使用文檔正文，并與頁面滾動(dòng)一起移動(dòng)。“定位”元素是其static位置的元素

以下例子強(qiáng)調(diào)元素的絕對(duì)位置：

<!DOCTYPE html>
<html>
<head>
<style>
.square-set {
 color: WHITE;
 background: darkgrey;
 height: 200px;
 position: relative;
 border-radius: 15px;
 font:  Helvetica ;
 width: 420px;
}
.square {
 background: green;
 height: 80px;
 position: absolute;
 width: 80px;
 border-radius: 15px;
 line-height: 60px;
}
.square-1 {
 top: 10%;
 left: 6%;
}
.square-2 {
 top: 5;
 right: -20px;
}
.square-3 {
 bottom: -15px;
 right: 40px;
}
.square-4 {
 bottom: 0;
}
</style>
</head>
<body>
<div class="square-set">
 <figure class="square square-1">SQUARE 1</figure>
 <figure class="square square-2">SQUARE 2</figure>
 <figure class="square square-3">SQUARE 3</figure>
 <figure class="square square-4">SQUARE 4</figure>
</div>
</body>
</html>

效果如下：

使用css定位html元素的方法

fixed（固定的）

它從正常文檔流中刪除的元素，并且在頁面布局中，沒有為元素創(chuàng)建空間。元素相對(duì)于由視口建立的初始包含塊定位，其最終位置由值top，right，bottom和left確定。此值始終創(chuàng)建新的堆疊上下文。

用于將位置設(shè)置為固定的CSS如下所示：

position: fixed;

元素position: fixed; 相對(duì)于視口定位，這意味著即使頁面滾動(dòng)，它也始終保持在同一位置。top，right，bottom和left屬性用于定位元素。

sticky（黏性的）

該元素對(duì)應(yīng)于文檔的正常流程定位，然后根據(jù)頂部，右側(cè)，底部和左側(cè)的值相對(duì)于其最接近的上升塊級(jí)別（包括與表格相關(guān)的元素）偏移。偏移量不會(huì)影響任何其他元素的位置。

此值始終創(chuàng)建新的堆疊上下文。請(qǐng)注意，粘性元素“粘附”到其最近的祖先，即使該祖先不是最近的實(shí)際滾動(dòng)祖先，也具有“滾動(dòng)機(jī)制”。

用于將位置設(shè)置為粘性的CSS是：

position: sticky;

position: sticky; 根據(jù)用戶的滾動(dòng)位置定位元素，并根據(jù)滾動(dòng)位置在 位置relative 和fixed位置之間切換。

重疊元素

網(wǎng)頁上的重疊元素非常有用，可以突出顯示，推廣和關(guān)注我們網(wǎng)頁上的重要內(nèi)容。在您的網(wǎng)站上制作元素疊加是非常有用且非常有價(jià)值的功能設(shè)計(jì)實(shí)踐。當(dāng)元素被定位時(shí)，它們可以與其他元素重疊，因此為了指定順序（應(yīng)該在其他元素的前面或后面放置哪個(gè)元素），我們應(yīng)該使用z-index屬性。堆棧順序較大的元素始終位于堆棧順序較低的元素前面。作為通知，z-index屬性僅適用于定位元素（position：absolute，position：relative或position：fixed）。

以下示例顯示了z-index屬性如何在不同的方塊上工作：

<!DOCTYPE html>
<html>
<head>
<style>
.square-set {
  color: white;
  background: purple;
  height: 170px;
  position: relative;
  border-radius: 15px;
  font:  Helvetica;
  width: 400px;
}
.square {
  background: orange;
  border: 4px solid goldenrod;
  position: absolute;
  border-radius: 15px;
  height: 80px;
  width: 80px;
}
.square-1 {
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.square-2 {
  position: absolute;
  z-index: 2; 
  background: black;
  width: 65%;
  left: 60px;
  top: 3em;
}
.square-3 {
  position: absolute;
  z-index: 3; 
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}
</style>
</head>
<body>
<div class="square-set">
  <figure class="square square-1">SQUARE 1</figure>
  <figure class="square square-2">SQUARE 2</figure>
  <figure class="square square-3">SQUARE 3</figure>
</div>
</body>
</html>

效果如下：

使用css定位html元素的方法

在圖像上定位文本

下面的示例使用上述CSS定位值在圖像上覆蓋一些文本：

<!DOCTYPE html>
<html>
<head>
<style>
.module{
  background: 
    linear-gradient{
      rgba(0, 4, 5, 0.6),
      rgba(2, 0, 3, 0.6)
    ),
    url(http://www.holtz.org/Library/Images/Slideshows/Gallery/Landscapes/43098-DSC_64xx_landscape-keltern-1_wall.jpg);
  background-size: cover;
  width: 600px;
  height: 400px;
  margin: 10px 0 0 10px;
  position: relative;
  float: left;
}
.mid h4 {
  font-family: Helvetica;
  font-weight: 900;
  color: white;
  text-transform: uppercase;
  margin: 0;
  position: absolute;
  top: 30%;
  left: 50%;
  font-size: 3rem;
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="module mid">
  <h4>Wild nature</h4>
</div>
</body>
</html>

效果如下：

使用css定位html元素的方法

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)使用css定位html元素的方法大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道。

新聞標(biāo)題：使用css定位html元素的方法-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://chinadenli.net/article10/gccdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、定制網(wǎng)站、定制開發(fā)、網(wǎng)站排名、網(wǎng)站維護(hù)、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)