新课：PHP零基础（CMS开发）教学！
立即报名web前端基础（学习html和css我们可以做什么）
11分钟45秒html基础
HTML中的常用标签及属性（文档头部 head）
HTML中的常用标签及属性（文本 字体格式化）
HTML中的常用标签及属性（超链接）
HTML中的常用标签及属性（列表）
HTML中的常用标签及属性（form表单）
HTML中的常用标签及属性（表格）
css基础
CSS中的盒模型
CSS中的边框样式
CSS中的背景控制
块级元素和行内元素相互转换
CSS中的定位
CSS中的浮动
常用导航布局案例
简单CSS3下拉菜单效果实现
hiki19875年前
13课 CSS的定位-相对定位和绝对定位 绝对定位要相对于父级元素，否则就会默认定位 给行内元素一个绝对定位后，它就会变成一个块级框，就不用给他display: block;来转成块级元素了。 通常在做绝对定位时，会给它的父级设置相对定位。 一般情况是结合使用，也可单独使用，单独使用时绝对元素是找body的属性。 它们是相对于水平或者垂直方向进行位移。 position: relative; 设置相对定位 position: absolute;设置绝对定位
0
37215年前
<html> <head> <meta charset="utf-8"> <title>相对定位与绝对定位</title> <style type="text/css"> *{padding:0px;margin:0px;} body{color:#fff;} .a1{width:150px;height:150px;background:red;position:relative;left:300px;}/*设置宽高，背景红色，相对定位：距离原始位置左侧300，也就是右移300，下面直接说相对原位置右移*/ .a2{width:150px;height:150px;background:green;position:absolute;top:33px;left:330px;}/*设置宽高，背景绿色，绝对定位（由于没有已经定位的父元素，所以这个绝对定位是相对于body）：下移33，右移330，所以显示覆盖在第一个上面*/ .a3{width:150px;height:150px;background:blue;}/*设置宽高，背景蓝色，无定位*/ .a4{width:150px;height:150px;background:black;position:relative;top:50px;left:50px;}/*设置宽高，背景黑色，相对定位：下移50，右移50*/ .a5{width:80px;height:80px;background:yellow;color:green;position:absolute;left:10px;top:10px;}/*设置宽高，比其他几个都小，背景黄色，字体颜色绿色，绝对定位：（由于其父元素a4已经相对定位，所以a5的绝对定位就成了相对于a4的定位）右移10，下移10*/ .a6{position:absolute;right:20px;color:black;width:80px;height:30px;background:#ccc;line-height:30px;text-align:center;}/*绝对定位：（由于没有已经定位的父元素，所以a6的绝对定位是相对于body）距离右边20，字体颜色黑色，设置宽高（其本身是个span行内元素，原本设置行高不起作用，但是它已经绝对定位，所以就变成了块级元素），背景色ccc，line-height与height一样，即垂直居中，文字水平居中*/ </style> </head> <body> <div class="a1">第一个</div> <div class="a2">第二个</div> <div class="a3">第三个</div> <div class="a4"> <div class="a5">第五个</div> </div> <span class="a6">导航条</span> </body> </html>
0
