web第三周作业（1）探究总结relative、fixed、absolute三种定位的特性和共性

最新推荐文章于 2022-11-02 22:19:42 发布

weixin_30509393

最新推荐文章于 2022-11-02 22:19:42 发布

阅读量121

点赞数

原文链接：http://www.cnblogs.com/duxingrui-99/p/9685628.html

版权

HTML

<!DOCTYPE>
<html>
<head>
    <title>实验探究relative</title>
    <link rel="stylesheet" href="实验样式.css">
</head>
<body>
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
</body>
</html>

CSS

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: black;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

三种定位的不同效果图：

relative定位分析：

在计算机定位时，图片显示应该在它的默认位置上进行偏移，top和left属性定义了图片显示的偏移量，在该代码示例中则表示在默认的位置上纵向向下偏移20px，向左横向偏移20px。

fixed和absolute定位分析：

顾名思义，absolute是用来对容器进行绝对定位的，它完全可以抛弃容器原来的位置，放在页面上任意位置，游离在文档页面上，而fixed的属性的定位方式与absolute相同，但fixed一般不用于计算机，一般仅限于打印或者其他媒介显示上进行绝对定位，例如用于广告。

absolute同时具有覆盖功能：

CSS

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  color: white;
}
#one {
  position: absolute;
  top: 20px;
  left: 20px;
  background: red;
}
#two {
  position: absolute;
  top: 40px;
  left: 40px;
  background: black;
}
#three {
  position: absolute;
  top: 60px;
  left: 60px;
  background:yellow;
}
#four {
  position: absolute;
  top: 80px;
  left: 80px;
  background: blue;
}

后出现的图片会覆盖先前出现的图片。

转载于:https://www.cnblogs.com/duxingrui-99/p/9685628.html

weixin_30509393

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web第三周作业（1）探究总结relative、fixed、absolute三种定位的特性和共性

HTML<!DOCTYPE><html><head> <title>实验探究relative</title> <link rel="stylesheet" href="实验样式.css"></head><body><div class="box" i...
复制链接

扫一扫