CSS 各种定位(position)方式的区别

static:静态定位是position的默认值,元素框正常生成,也就是没有定位时的正常显示。

       relative:相对定位

 

  用法一:元素相对自身的原位置偏移某个距离,但是原本的空间依旧保留,表现为空白。

 

  用法二:把一个元素设置为position: relative; 可以使该元素的子元素相对该元素绝对定位。

 

  absolute:绝对定位

 

  元素从文档流删除,并相对于包含块定位。元素在原本的空间关闭。元素定位后生成一个块级框,不论它原来是行内元素还是块级元素。

 

  包含块:最近的position值不是static的祖先元素(块级或行内),一般会指定一个元素作为绝对定位元素的包含块,将其position设置为relative而且没有偏移。

 

  fixed:固定定位

 

  元素从文档流删除,并相对于浏览器视窗定位,因此不随文档滚动而移动。元素在原本的空间关闭。元素定位后生成一个块级框,不论它原来是行内元素还是块级元素。与绝对定位的区别仅仅是包含块不同。

 

  包含块:浏览器视窗。

 

  absolute/fixed和float对比

 

  类似:元素都会从文档流删除,但是依旧会影响布局;都会生成一个块级框,无论原来是不是块级元素。

 

  区别:float的包含块是最近的块级祖先元素。

 

  偏移属性:top/right/bottom/left,初始值是auto。

 

  采用position定位之后必须采用偏移属性定义偏移量,也就是相对包含块的偏移。注意应用于position值不是static的元素。

 

  有时也需要定义width和heigth,但是可能会和偏移属性的定义冲突,因为四个偏移属性实际上已经定义了元素的大小。此时,根据width和left属性定义左右,根据top和height属性定义上下。

 

  内容溢出overflow: visible/ hidden/ scroll /auto/ inherit,初始值是visible。

 

  一个元素的大小固定,但是其内容放不下,就会导致溢出。overflow控制溢出部分的可见(visible)、不可见(hidden)、滚动可见(scroll)。

 

  元素可见性visibility: visible/ hidden/ collapse/ inherit,初始值是visible。

 

  visibility:hidden和display:none的区别:visibility:hidden设置元素不可见,但是元素依旧会影响布局,只是元素部分呈现为空白;display:none元素不显示并且从文档流中删除,对文档布局没有任何影响。

时间: 2024-10-10 17:47:19

CSS 各种定位(position)方式的区别的相关文章

10步掌握CSS布局定位: position static relative absolute float

无意中看到此文,因作者强调其中避开了浏览器bug/分歧,所以个人认为值得借鉴. 不才仔细看了此文,自觉受益匪浅 ,屡试不爽,佩服作者对css布局的精炼总结,顺便小译了一段, 英文水平有限,且个人通常写写php,对css了解不深却有点兴趣,错误之处还请指正. 个人没有空间,代码中的css文件和js保留了完整路径:http://www.barelyfitz.com/screencast/html-training/css/positioning/ 原文地址:http://www.barelyfitz

html中DIV+CSS与TABLE布局方式的区别及HTML5新加入的结构标签(转)

DIV与TABLE布局的区别 div 和 table 的加载方式不同,div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少:table 的加载方式是完成后加载,遇到 <table> 后,在读</table> 之前,table 中的内容不加载,或者传输中断了的时候加载,这是因为TABLE牵涉到多行多列问题,所以只有当TABLE所有内容加载完毕,浏览器才知道该怎么显示 . div与css配合使

CSS布局定位:position

position:属性规定元素的定位类型. 取值:static | absolute | fixed | relative static : 默认值.无特殊定位 .对象遵循HTML定位规则. absolute(绝对定位)  : 将对象从文档流中拖出(可层叠).用left, right, top, bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位.如果不存在这样的父对象,则依照body对象绝对定位. fixed(固定定位,一种特殊的绝对定位) :相对于浏览器窗口.可以根据le

HTML页面引入CSS的几种方式及区别

1. 使用HTML标签的style属性 如:<p style="font-size:12px; color: blue"> 这种方式的优点:分散灵活方便: 缺点:缺乏整体性和规划性,不利于维护,维护成本高: 这种方式的CSS渲染的优先级要高于其它三种. 2. 将样式代码写在<style></style>标签中 通常将style标签放到HTML文件<head></head>标签里 如:<html><head&g

css固定定位与绝对定位的区别

绝对定位中当一个DIV块的位置被定义为绝对定位的时候,也就失去了文档流即失去原本的位置,并且以父级为基准(父级元素必须是相对定位如果不是则一直往上找,直到找到body为止)来进行偏移, 固定定位其实和绝对定位有很多相似之处只不过是基于当前页面来偏移.   我们可以用代码来验证代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D

CSS Positioning(定位)

CSS Positioning(定位) position 属性指定了元素的定位类型. position 属性的四个值: static relative fixed absolute 元素可以使用的顶部,底部,左侧和右侧属性定位.然而,这些属性无法工作,除非是先设定position属性.他们也有不同的工作方式,这取决于定位方法. static 定位 HTML元素的默认值,即没有定位,元素出现在正常的流中. 静态定位的元素不会受到 top, bottom, left, right影响. fixed

CSS:CSS Positioning(定位)

ylbtech-CSS:CSS Positioning(定位) 1.返回顶部 1. CSS Positioning(定位) position 属性指定了元素的定位类型. position 属性的四个值: static relative fixed absolute 元素可以使用的顶部,底部,左侧和右侧属性定位.然而,这些属性无法工作,除非是先设定position属性.他们也有不同的工作方式,这取决于定位方法. static 定位 HTML元素的默认值,即没有定位,元素出现在正常的流中. 静态定位

《css定位 position》课程笔记

这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三种布局:标准流,浮动,定位 两大元素:块级元素(div,h1-6,table,ol,ul,li,p),内联元素(a,span,img,input) position可选参数 static(标准流中正常排列) relative(相对定位) absolute(绝对定位) fixed(脱离正常的文档流,登

总结一下CSS中的定位 Position 属性

在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位.元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定. relative:生成相对定位的元素,相对于其

web前端css定位position和浮动float

最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框”.与之相反,span和h3等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”. 在这种情况下,这个框称为无名块框,因为它不与专门定义的元素相关联. 块级元素的文本行也会发生类似的情况.假设有一个包含三行文本的段落.每行文本形成一个无名框.无法直接对无名块或行框应用样式,因为没有可以