HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第7章定位

阿新 • • 發佈：2020-08-13

本教程案例線上演示

有路網PC端
 有路網移動端

免費配套視訊教程

教程配套原始碼資源

定位

position屬性

static：預設值，沒有定位

relative：相對定位

absolute：絕對定位

fixed：固定定位

標準文件流

標準文件流:是指頁面上從上到下,從左到右,網頁元素一個挨一個的簡單的正常的佈局方式。

一般在HTML元素分為兩種：塊級元素和行內元素。像div,p這些的元素屬於塊級元素，塊級元素是從上到下一行一行的排列；預設一個塊級元素會佔用一行，而跟在後面的元素會另起一行排列；

行內元素是在一行中水平佈置，從左到右的排列；span,strong等屬於行內元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>
<div style="background-color:dodgerblue">我是塊級元素，我單獨佔一行 我單獨佔一行 我單獨佔一行</div>
<div style="background-color:yellow">我是塊級元素，我一行一行的排列，我一行一行的排列，我一行一行的排列</div>
<span style="background-color:green">我的行內元素，我水平的排列，我水平的排，我水平的排，我水平的排列，我水平的排列</span>
<span style="background-color:gray">我是行內元素，沒有那麼霸道，沒有那麼霸道，沒有那麼霸道，沒有那麼霸道，沒有那麼霸道</span>
</body>
</html>
</body>
</html>

static定位

position:static

元素沒有定位，以標準流方式顯示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>position屬性</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="father">
  <div id="first">第一個盒子</div>
  <div id="second">第二個盒子</div>
  <div id="third">第三個盒子</div>
</div>
</body>
</html>

@charset "gb2312";
/* CSS Document */

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來描述盒子的向上的移動；
如果是負數就是相反的方向。

相對定位的盒子，不脫離標準流，老家保留位置，其後的元素不能佔用其原有位置。

相對定位的主要用途是作為其內部元素絕對定位時的參照標準，有相對於我之義。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>position屬性</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="father">
  <div id="first">第一個盒子</div>
  <div id="second">第二個盒子</div>
  <div id="third">第三個盒子</div>
</div>
</body>
</html>

@charset "gb2312";
/* CSS Document */

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

使用了絕對定位的元素以它最近的一個“已經定位”的“祖先元素” 為基準進行偏移。如果沒有已經定位的祖先元素，那麼會以瀏覽器視窗為基準進行定位。絕對定位的元素從標準文件流中脫離，其後的元素會佔據其原有的位置。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>position屬性</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="father">
  <div id="first">第一個盒子</div>
  <div id="second">第二個盒子</div>
  <div id="third">第三個盒子</div>
</div>
</body>
</html>

@charset "gb2312";
/* CSS Document */

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: absolute;
	top:10px;
	right: 10px;
}
#second {
	background-color:#CCF;
	border:1px #0000A8 dashed;
}
#third {
	background-color:#C5DECC;
	border:1px #395E4F dashed;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>position屬性</title>
<link href="css/style2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="father">
  <div id="first">第一個盒子</div>
  <div id="second">第二個盒子</div>
  <div id="third">第三個盒子</div>
</div>
</body>
</html>

@charset "gb2312";
/* CSS Document */

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;
	position: relative;
}
#first {
	background-color:#FC9;
	border:1px #B55A00 dashed;
	position: absolute;
	top:10px;
	right: 10px;
}
#second {
	background-color:#CCF;
	border:1px #0000A8 dashed;
}
#third {
	background-color:#C5DECC;
	border:1px #395E4F dashed;
}

練習微信訊息提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dot{
            height: 20px;
            width: 20px;
            background-color: red;
            border-radius: 50%;
            line-height: 20px;
            text-align: center;
            font-size: 14px;
            position: absolute;
            top:-10px;
            right: -10px;
        }
        #weixin{
            height: 80px;
            width: 80px;
            font-size: 20px;
            line-height: 80px;
            text-align: center;
            border: 1px solid green;
            position: relative;
        }
    </style>
</head>
<body>

<div id="weixin">微信
    <div id="dot">2</div>
</div>
</body>
</html>

z-index屬性

調整元素定位時重疊層的上下位置

z-index屬性值：整數，預設值為0
設定了positon屬性時，z-index屬性可以設定各元素之間的重疊高低關係

z-index值大的層位於其值小的層上方

網頁元素透明度

CSS設定元素透明度
opacity:x
x值為0~1，值越小越透明
opacity:0.4;

filter:alpha(opacity=x)
x值為0~100，值越小越透明
filter:alpha(opacity=40);

練習香山紅葉

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>z-index屬性</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content">
  <ul>
    <li><img src="image/maple.jpg"  alt="香山紅葉" /></li>
    <li class="tipText">京秋魅力&#8226;相約共賞香山紅葉</li>
    <li class="tipBg"></li>
    <li>時間：11月16日 星期六 8:30</li>
    <li>地點：朝陽區西大望路珠江帝景K區正門前集合</li>
  </ul>
</div>
</body>
</html>

@charset "gb2312";
/* CSS Document */
ul, li {
	padding:0px;
	margin:0px;
	list-style-type:none;
}
#content {
	width:331px;
	overflow:hidden;
	padding:5px;
	font-size:12px;
	line-height:25px;
	border:1px #999 solid;
}
#content ul {
	position:relative;
}
.tipBg, .tipText {
	position:absolute;
	width:331px;
	height:25px;
	top:100px;
}
.tipText {
	color:#FFF;
	text-align:center;
	z-index:1;
}
.tipBg {
	background:#000;
	opacity:0.5;
	filter:alpha(opacity=50);
}

專案實戰有路網首頁輪播圖

lunbo.css

.lunbotu{
  width: 750px;
  position: relative;
}
.lunbotu img{
  width: 750px;
}
.lunbotu ul{
  position: absolute;
  right: 12px;
  bottom: 20px;
}
.lunbotu li{
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: gray;
  text-align: center;
  line-height: 20px;
  color: white;
  border-radius: 50%;
  margin: 0 4px;
}

li:hover{
  background-color: tomato;
}

youlu-lunbo.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="lunbo.css">
</head>
<body>
  <div class="lunbotu">
    <img src="img/lunbo.jpg" alt="">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
</body>
</html>

固定定位

position: fixed;

仿簡書網站頂部導航

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .top-nav{
      height: 80px;
      width: 100%;
      background-color: pink;
      position: fixed; 
      top: 0px;
    }
  </style>
</head>
<body style="height: 2000px;">
  <div class="top-nav">頂部導航</div>
</body>
</html>

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第7章定位

本教程案例線上演示

免費配套視訊教程

教程配套原始碼資源

定位

標準文件流

static定位

相對定位

絕對定位

練習微信訊息提示

z-index屬性

網頁元素透明度

練習香山紅葉

專案實戰有路網首頁輪播圖

固定定位

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第2章HTML基礎知識

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第3章初識CSS

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第4章CSS文字樣式

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第5章CSS盒子模型

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第6章表格與表單

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第7章定位

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第8章FlexBox佈局

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第9章FlexBox實戰有路網

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第11章有路網移動端主頁實戰

HTML5CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第10章有路網PC端主頁實戰整合

phaser3入門教程-從零開始開發一個打磚塊遊戲

從0開始搭建一個較健壯SpringBoot專案

自己動手從0開始實現一個分散式RPC框架

pycharts-從0開始美化一個圖表

實戰經驗：“拼多多無貨源店群”新手0基礎創業，老司機手把手教你開店，月入過萬！

vue-cli3.0 + element-ui框架搭建，手把手教你搭框架

從 0 開始入門 Chrome Ext 安全（二） -- 安全的 Chrome Ext

從0開始學習大資料之java spark程式設計入門與專案實踐

黑馬程式設計師匠心之作|C++教程從0到1入門程式設計--練習-結構體陣列

黑馬程式設計師匠心之作|C++教程從0到1入門程式設計--練習-結構體中const的使用

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第7章定位

本教程案例線上演示

免費配套視訊教程

教程配套原始碼資源

定位

標準文件流

static定位

相對定位

絕對定位

練習 微信訊息提示

z-index屬性

網頁元素透明度

練習 香山紅葉

專案實戰 有路網首頁輪播圖

固定定位

相關推薦

練習微信訊息提示

練習香山紅葉

專案實戰有路網首頁輪播圖