当前位置: 源码素材网 » CSS教程 » 详情页

CSS position:relative 相对定位的具体实现及方法

  •   时间:2019-01-08
  • 概述:相对定位

这是一个基础的CSS学习之例,演示最常用的CSS相对定位的实现,代码如何编写的细节,下面直接来看实例代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css属性实例</title>
<style>
.div1{
  background:#333333;
  width:200px;
  height:100px;
  }
.relative{
  position:relative;
  top:50px;
  left:100px;
  width:400px;
  height:100px;
  background:#666666;}
.div2{
  background:#999999;
  width:200px;
  height:100px;
  }
</style>
</head>
<body>
  <div class="div1"></div>
  <div class="relative">这是相对定位的元素。</div>
  <div class="div2"></div>
</body>
</html>

    相关声明:

      若“CSS position:relative 相对定位的具体实现及方法”有损您的权益,请告之我们删除内容。
      部分文章来源于网络,版权归原作者所有。