html页面布局

相对定位：
1）、相对的是自身原有的位置
2）、相对定位移动后，会保留原有位置（可以使用定位占用，但普通写法时，无法占用）
3）、不会影响文档流
position:relative; — 开启该元素的定位
具体的位置：left、top

//父级
.main{width: 500px;height: 500px;border:1px solid;position: relative;margin: 100px auto;
}
//子级
#box{width: 200px;height: 200px;background-color: red;top:30px;
}

绝对定位：
1）、脱离当前文档流，使元素“飘”起来，父级没有获取宽高
2）、绝对定位的参考值：会去找具有相对定位的父元素，如果没有，继续往上找，直到整个文档
3）、90%以上的绝对使用场景，都需要相对定位来配合，也就是人们趣称的“父相子绝”
适用场景：
1）、大范围移动或小范围移动同样适用
2）、动态去拖拽元素时；或需要重叠的动画效果时
备注：left / top ，使用时，可以不紧跟着定位属性走，中间可以间隔，甚至写在不同选择器中，但是，一定得写开启定位。
position:absolute —开启绝对定位

补充：z-index：数字；
作用：调整当前元素的层级
注意：1）、属性值没有单位，只写数字，记得分号结尾。
2）、如果需要调整的元素个数较多时，需要将每个元素的层级都明确划分

.main>div{position: absolute;top: 150px;left: 150px;
}

恭喜你，学习到这个阶段，就要开始大量练习写页面了~建议各大电商平台页面都来一个，哈哈哈

html页面布局—定位相关推荐

初识HTML（五）进阶：CSS盒子模型、页面布局
目录 CSS 盒子模型(Box Model) 页面布局浮动流制作导航栏如何页面布局定位流 relative相对定位 absolute绝对定位 fixed固定定位 CSS 盒子模型(Box Mo ...
利用div的定位制作复杂的页面布局
既然是复杂的布局自然用到较多的div以及并列与嵌套.这就要我们在为它们命名的时候遵从一定的规定,以便于可读性. 下面先来看一张布局图: 这是三九健康网一个频道的页面,原本是很长的页面,但为了说明问题, ...
前端必经之路：CSS页面布局(深入理解浮动布局、定位布局、圣杯布局和双飞翼布局等重要布局方案)
建筑师在对一栋建筑物进行施工之前,首先会根据建筑图纸上的平面图.立体图.剖面图和构造详图等对建筑物进行整体布局后再从局部施工(当然不排除有先装修完厕所再砌卧室围墙的奇葩).在一个网页页面的搭建过程中, ...
CSS3与页面布局学习总结（四）——页面布局大全BFC、定位、浮动、7种垂直居中方法...
目录一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...
前端面试CSS自检（下）页面布局、定位与浮动和场景应用（先看问题自己自述一遍不会再看答案）
推荐大家的使用本篇文章的方式: 先看问题自己会不会,如果会的话,要自己说一遍,组织好语言. CSS的面试内容主要可以分四个部分: CSS基础.页面布局.定位与浮动和场景应用 CSS部分会涉及到代码的编 ...
unigui的页面布局使用
(unigui的页面布局还是很强大的,基本什么的排版都能搞好.前面部分为原文章翻译,翻译不一定很准确,就能看吧,后面有使用说明,有什么不明白的欢迎加我QQ(910300653)一起交流学习) 一.布局 ...
页面布局与编写(续2)
概述虽然之前总结了一些页面布局与编写的心得,但是写起页面来还是有很多疑惑的,主要是在有多种写法的时候该用哪种写法?个人觉得这个问题很重要,不能哪种方法能用就用那种方法算了,因为要考虑到日后维护和页面 ...
iOS之页面布局-踩坑的原由
iOS之页面布局原文请点击在<iOS 7 UI Transition Guide>中有在<iOS 7 UI Transition Guide>的Bar and Bar Bu ...
web前端（12）—— 页面布局2
本篇博文,主要就讲定位的问题,也就是页面布局里最重要的,本篇博文不出意外的话,也是css的最后一篇博文了定位,position属性定位有三种: 相对定位绝对定位固定定位相对定位,positi ...

html页面布局—定位

html页面布局—定位相关推荐

最新文章

热门文章