相对定位——position: relative

一、代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>4、相对定位</title>
</head>
<style>.div1{width: 300px;height: 300px;background-color: yellow;margin: auto;z-index: 0;}.div2{width: 100px;height: 100px;background-color: rgb(216, 128, 28);/* 相对定位 不会脱离文档流 */position: relative;left: 30px;top: 30px;z-index:3;}.div3{width: 100px;height: 100px;background-color: rgb(28, 216, 37);position: relative;z-index: 2;}
</style>
<body><div class="div1"><div class="div2"></div><div class="div3"></div></div>
</body>
</html>

二、效果图：

相对定位——position: relative相关推荐

position属性:绝对定位position: absolute；相对定位 position: relative；固定定位 position: fixed；
position 属性: position常见的定位模式: 定位模式描述是否脱离文档流移动模式定位偏移属性 static 默认属性对象遵循常规流不移动不移动 relative 相对定位 ...
CSS 元素的定位之相对定位 position: relative
在CSS中,通过 position属性来对元素进行定位,可选的定位类型有 static | relative | absolute | fixed,默认值为 static,表示没有定位,元素保持在它原 ...
css 相对定位 position relative
css 相对定位这里相对的意思是,相对于一个元素没有定位前显示的位置,也就是原来显示的位置, 这个需要注意: 下面分两个部分来看相对定位: 第一部分:如何实现相对定位? 代码(1):没有加定位的情况 ...
一文读懂css的相对定位【relative position】以及相对定位为什么要设置偏移量？
目录何为定位偏移量垂直方向 top bottom 水平方向 left right relative-相对定位何为相对定位相对定位的特点实例元素代码的起始位置元素若不开启相对定位,即便设 ...
深入理解position:relative 与 position:absolute（divb相对于diva进行绝对定位）
position 有三个值,static(静态).relative(相对).absolute(绝对):由于static是所有页面元素的默认值,因此设置元素的定位类型时几乎不用这个值,除非用于覆盖之前的 ...
position:relative 与 position:absolute
position 有三个值,static(静态).relative(相对).absolute(绝对):由于static是所有页面元素的默认值,因此设置元素的定位类型时几乎不用这个值,除非用于覆盖之前的 ...
{转摘}理解 position:relative 与 position:absolute
转载:<a href="http://www.happyshow.org/article/125.html" target="_blank"> po ...
CSS:position:relative;的认识
CSS定位的原理把浏览器窗口想象成一个坐标系统: CSS定位的原理是:你可以将任何盒子(box)放置在坐标系统的任何位置上. 采用CSS定位技术来放置元素是非常精确的.相对于使用表格.透明图像或其他 ...
CSS 中，为什么绝对定位（absolute）的父级元素必须是相对定位（relative）？
问题: CSS 中,为什么绝对定位(absolute)的父级元素必须是相对定位(relative)? 搞清楚了,正确的应该是只要父级元素=设置了position值(absolute或者relative ...

相对定位——position: relative

相对定位——position: relative

相对定位——position: relative相关推荐

最新文章

热门文章