css四种定位详细讲解

在前端开发中，最重要的莫过于盒子的使用，在盒子中最常用的就是使用定位进行对盒子的位置的调整，这里我简单的介绍下这四种定位方式：
1.static：静态定位也是默认的定位方式，该定位是不脱标的定位方式，但是top、right、left、bottom，这些属性对他无效，只能使用margin进行调整位置。
2.fixed：固定定位该定位是完全脱标的，位置不保留，位置不会随着页面滚动条的转动进行转动，常用作导航使用。
3.relative:绝对定位，这个定位是不脱标的，top,left.right.bottom,会保留该位置,是相对于自身进行移动的。
4.absolution:相对定位，这是定位是完全脱标的，不保存位置，top,left,right,bottom是相对与属性为relative的父级盒子，如果父级没有就继续往上找，直到到body中。
总结：这四个定位有两个是脱标的，有两个不脱标的（脱标的意思是，移动是否保存原来位置），一般情况下，relative和absolute连用，子绝父相进行实现定位。

css四种定位详细讲解相关推荐

H5C3基础学习总结之CSS四种定位模式
定位组成定位 = 定位模式 + 边偏移定位模式适用于制定一个元素在文档中的定位方式.边偏移则决定了该元素的最终位置. 定位模式定位模式决定元素的定位方式,通过position属性来设置: 值语 ...
html四种选择器的特点,css四种选择器总结
css 在网页开发中扮演着重要的角色,被誉为网页开发的三剑客,如果说html是人的外在器官部分,那css无疑是各个器官组成在一起然后表现出来,css又称样式重叠在网页排版布局中的地位举足轻重. 做为后 ...
CSS的四种定位方式
CSS的四种定位方式 1.静态定位: 设置方式为position: static;静态定位的盒子是标准流状态,用于取消定位.静态定位的盒子处于网页的最底层,并且top.left.bottom.righ ...
定位的简介和四种定位
目录一.定位的简介二.四种定位 Ⅰ 相对定位 Ⅱ 绝对定位 Ⅲ 固定定位 Ⅳ 粘滞定位一.定位的简介定位(position) 定位时一种更加高级的布局手段通过定位可以将元素摆放到页面的任意位 ...
dwcss样式中英对照_DW中常用css样式四种类型详细解析说明
css 样式加载 css 样式类型有以下四种一.外部样式格式: 路径 " /> 举例: 用处:这种形式是把 css 单独写到一个 css 文件内,然后在源代码中以 link 方 ...
css三种定位都脱离文档流了吗,CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别...
1.代码 (1)示例代码1 CSS布局之脱离文档流详解--浮动.绝对定位脱离文档流的区别 .left { width: 300px; height: 500px; background: red; f ...
关于四种定位方式的介绍
定位,同浮动一样是前端开发人员进行css布局的另一神器.浮动布局比较灵活,但不容易控制,定位布局则相反,可以让用户精确地控制元素在页面中的位置"指哪打哪",但缺乏浮动布局的灵活性. ...
html5边框顶格,CSS 三种定位方式以及格式化上下文详解》 html5jscss
常规流( Normal flow ) 之称之为常规流,是因为这是相对于后面的浮动和绝对定位的一个概念,浮动和绝对定位元素都脱离了当前的常规流. 在 CSS2.1中,常规流包括块框( block box ...
Java遍历Properties的所有的元素，四种方法详细总结的代码实例
使用Java代码,详细示范四种遍历Properties中的所有元素,并打印输出的代码实例. 直接看代码吧.具体怎么读的文件,我在这就省略啦.我的前一篇文章就是示范怎么读和写Properties文件的. ...

css四种定位详细讲解

css四种定位详细讲解相关推荐

最新文章

热门文章