关于css:HTML5CSS3前端入门教程从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第7章定位

35次阅读

共计 7085 个字符，预计需要花费 18 分钟才能阅读完成。

本教程案例在线演示

有路网 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>

正文完
css
发表至： css
2020-08-13
 0
关于css:3D导航栏
关于css:如何使用Grid中的repeat函数
关于css:手把手教你CSS-Flex布局
关于css:boxsizing盒子模型