当前位置：首页 > 行业动态 > 正文

如何在html5里添加定位

在HTML5中，我们可以使用CSS3的position属性来对元素进行定位。position属性有四个值：static、relative、absolute和fixed，下面我将详细介绍如何在HTML5中添加定位。

1、static定位

static是元素的默认定位方式，元素按照正常的文档流进行排列。

<!DOCTYPE html>
<html>
<head>
<style>
  .static {
    position: static;
    backgroundcolor: lightblue;
    padding: 20px;
  }
</style>
</head>
<body>
<div >这是一个静态定位的元素。</div>
<div >这是另一个元素。</div>
</body>
</html>

2、relative定位

relative定位是相对元素自身的正常位置进行偏移。

<!DOCTYPE html>
<html>
<head>
<style>
  .relative {
    position: relative;
    backgroundcolor: lightgreen;
    padding: 20px;
    top: 20px;
    left: 20px;
  }
</style>
</head>
<body>
<div >这是一个相对定位的元素。</div>
<div >这是另一个元素。</div>
</body>
</html>

3、absolute定位

absolute定位是相对于最近的非静态定位祖先元素进行偏移，如果没有非静态定位的祖先元素，则相对于初始包含块进行偏移。

<!DOCTYPE html>
<html>
<head>
<style>
  .container {
    position: relative;
    width: 200px;
    height: 200px;
    backgroundcolor: lightyellow;
  }
  .absolute {
    position: absolute;
    backgroundcolor: lightcoral;
    padding: 20px;
    top: 20px;
    left: 20px;
  }
</style>
</head>
<body>
<div >
  <div >这是一个绝对定位的元素。</div>
</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
<div >这是另一个元素。</div>
本站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本站，有问题联系侵删！
本文链接：http://www.xixizhuji.com/fuzhu/299601.html
0

相关文章

随机文章