原文：HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点
. 相对定位relative:顾名思义,相对定位是相对于自己的位置来进行偏移,如下图: 以盒子中心为基准,为每条边的正方向,例: 向右移动 px : 代码为left: px 或者right: px 向下移动 px : 代码为top: px 或者bottom: px . 绝对定位:absolute 以其第一个定位的祖辈级盒子为标准,定位祖辈级的中心方向为正,如下图: . 固定定位fixed,是独立 ...
2017-02-18 17:14 0 3484 推荐指数：
相关推荐
position属性用来规定元素的定位类型和方式 ①position：static 默认值，没有定位，元素出现在正常的流中； ②position：fixed 固定定位 是相对于浏览器窗口来进行定位； ③position：relative 相对定位 相对于其本身正常位置来进行定位，它原本 ...
前言： 最近在学习HTML、CSS的过程中，想模仿一下百度首页。发现搜索框这一部分与上下其它元素的空白距离可以随着窗口大小变化（效果如下图所示），于是自己研究了一下并记录下来。 效果实现 <!DOCTYPE html> <html> <head> ...
----转载自自己在牛人部落中的相关文章--- 在前端css定位中经常面对的一个问题是，百分比定位究竟是针对于谁定位？ 一、margin，padding的百分比 首先从css的设计意图说起，在浏览器默认的 writing-mode: horizontal-tb; 和 direction ...
其实position的值有四个，static/relative/absolute/fixed，而static是默认值，不算具有有定位属性，这里就不讲了。 定位其实就是跟元素设置定位属性，然后设置其对位的相对上下左右的距离，一般写法如下： 下面我们分情况讨论： 1、父级没有定位 ...
元素加了相对定位，则top:50% 表示元素相对于初始位置，y轴偏移的距离等于元素最近一级父盒子的高度的百分之50%，且最近一级父盒子必须显式设置高度；没有高度，top：百分比这种形式就不生效； 元素加了绝对定位，则top:50% ，表示元素相对于带定位的父元素的距离，这里的百分比，指的是元素 ...
.big{ padding-right: 100px; padding-bottom: 100px; width: 0; height: 0; background: yellow; margin- ...
给div按百分比设置高度 宽度两种方法： 第一种是给body标签设置他的高度值，xxxpx，div就会根据body的像素值取百分比； 第二种方法就是在div属性中加入 position:absolute; ...