CSS的相对定位详解

大家好，今天给大家分享一下CSS的相对定位

看代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{margin: 10px;padding: 5px;font-size: 12px;line-height: 25px;}#father{border: 1px solid brown;}#first{border: green 1px dashed;}#second {border: lightsalmon 1px dashed;}#third{border: green 1px dashed;}}</style>
</head>
<body>
<div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三盒子</div>
</div>
</body>
</html>

效果：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{margin: 10px;padding: 5px;font-size: 12px;line-height: 25px;}#father{border: 1px solid brown;padding: 0;}#first{border: green 1px dashed;background-color: brown;}#second {border: lightsalmon 1px dashed;background-color: yellow;}#third{border: green 1px dashed;background-color: darkorchid;}}</style>
</head>
<body>
<div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三盒子</div>
</div>
</body>
</html>

看效果：

相对定位：

 #first{border: green 1px dashed;background-color: brown;**position: relative;  /*相对定位*/top:-20px;left: 20px;**}

看效果：

写源码：

  #third{border: green 1px dashed;background-color: darkorchid;position: relative;bottom: 10px; /*向下距离20px*/right: 20px;/*    向右平移20px*/}

相对定位： position: relative;
就是要更改这个属性，相对于原先的位置，进行指定的偏移，相对定位的话，它依然在标准文档流当中，原来的位置会被保留

bottom: 10px; /*向下距离20px*/right: 20px;/*    向右平移20px*/

好了，CSS的相对定位就到这里了，谢谢大家

CSS的相对定位详解相关推荐

[转]CSS hack大全详解
转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...
CSS属性vertical-align详解（CSS之五）
CSS属性vertical-align详解作用对象 vertical-align的意思是在垂直方向进行对齐.它主要对以下属性的元素有效 inline元素.inline-block元素和普通的文本. ...
CSS vw vh详解
CSS vw vh详解简介适配原理简介 vw vh是一种相对单位相对视口的宽度计算结果 vw viewport width 1vw=1/100视口宽度 vh viewport height 1 ...
css background-attachment属性详解
css background-attachment属性详解 background-attachment属性用途 background-attachment属性用于设置背景图片定位的参照方式 backg ...
html右侧浮动菜单,HTML+CSS：css元素浮动详解，使用浮动制作导航栏菜单
原标题:HTML+CSS:css元素浮动详解,使用浮动制作导航栏菜单今天这篇文章我们来说一下css的浮动属性(float),给块状元素添加float属性可以使其转变为行内元素,也就是我们所说标签对象 ...
CSS盒子模型详解(清除无序列表的项目符号)
CSS盒子模型详解(清除无序列表的项目符号) 网页的布局过程准备好相关的网页元素(盒子) 利用CSS设置好盒子的样式以及在网页中的摆放位置往盒子里面装东西盒子模型(box model) 网页中, ...
基于HTTP浏览器缓存机制全面解析看Table表格的css样式代码详解
文章来源: 学习通http://www.bdgxy.com/ 普学网http://www.boxinghulanban.cn/ 智学网http://www.jaxp.net/ 漂亮的table表格样式 ...
CSS超链接样式详解
CSS超链接样式详解 1.超链接伪类 2.深入了解:hover :hover用于div :hover用于img 3.鼠标样式浏览器鼠标样式自定义鼠标样式 1.超链接伪类在CSS中,我们可以使用& ...
css input 内容换行显示,CSS文本换行详解
还记不记得昨天发表的<table表格那点事儿>最后的一个问题不?先撇开问题,我们从头说起. 在网页排版中,有些时候是需要文本自动换行的,对于中文来讲,无需设置属性即可自动实现换行,但是对于 ...

CSS的相对定位详解

CSS的相对定位详解相关推荐

最新文章

热门文章