CSS的四大布局层级 和 HTML标签的‘生态系统’(四)------定位层

  定位层,在一些情况下,元素随机摆放,在文档层和浮动层中布局已经远远无法满足需求,这时,我们将会使用定位属性。

  在一般的页面中,常用到的定位有三种----相对定位、绝对定位、固定定位。接下来我们一一了解一下这三种定位。

  相对定位(position:relative;),当一个元素具有相对定位时,该元素将可以设置以下五个属性,即top、left、right、bottom、z-index,四个方向属性设置后,可以改变元素的位置,分别是依据元素本身的四条边去定位,但是,元素在页面原先的地方还占据着位置(无论是文档层还是浮动层都可以占据位置),z-index是层级属性,设置后,会在z轴方向上做出层级的调整,当两个元素重叠时,层级高的会覆盖层级低的元素。PS:由于定位后在原先层次还占据位置,所以一般不会使用相对定位改变元素的位置,只会用来调层级或配合绝对定位时使用。

  绝对定位(position:absolute;),和相对定位一样,该元素将可以设置以下五个属性,即top、left、right、bottom、z-index,但是,除了z-index用法雷同外,剩下的四个属性在定位时,依据有所改变。

  我总结为以下三条:

  第一、查看它的父元素是否有定位属性,若有,则依据它父元素的四条边进行定位,若没有,参见第二条。

  第二、查看它的父元素的父元素是否有定位属性,若有,则依据它父元素的父元素的四条边进行定位,若没有,参见第三条。

  第三、一级级向上查,若查到某父级元素有定位属性,则依据该父级元素的四条边进行定位,若没有,则依据第一屏的浏览器四条边进行定位。

  PS:一般而言,需要移动位置时,都是使用绝对定位移动位置,但是往往需要父级元素添加定位属性配合使用,至于定位属性添加哪个值,依据页面情况而定。

  固定定位(position:fixed;),和上两种相同,该元素将可以设置以下五个属性,即top、left、right、bottom、z-index,但是,除了z-index用法雷同外,剩下的四个属性在定位时,依据也有所改变。

  由于固定定位后,元素将一直 在页面我们可以看到的区域,即元素将随着滚动条的滚动而滚动,所以固定定位的四个定位属性在赋值后,依据的是浏览器的四条边进行定位。

时间: 2024-10-14 15:16:42

CSS的四大布局层级 和 HTML标签的‘生态系统’(四)------定位层的相关文章

CSS的四大布局层级 和 HTML标签的‘生态系统’(二)------背景层

背景层,顾名思义,就是一个元素的背景,背景是用 CSS 属性中的 background 来实现的.background 属性是个缩写属性,其展开后包含很多分支属性: background-color : 背景色,使用该属性可以为一个元素添加一个背景色,添加背景颜色的取值大致可分为4种. background-color : red ; background-color : #ff0000 ; background-color : rgb(255,0,0) ; background-color :

CSS的四大布局层级 和 HTML标签的‘生态系统’(三)------文档层和浮动层

文档层,每一个放置内容的元素内部都会有一个文档流的规则,即内部的内容若不是浮动或定位的元素,将会按照从左到右,从上到下的规则来排列,块元素将会独占一行,剩下文本或是行内元素则排满一行,再排下一行. 在文档层中,元素或内容摆放位置,主要是通过padding.margin属性来移动位置,其中margin有很多的重点难点,需要去注意,比如marign-top的bug,margin可以设置负值,行内元素没有margin-top和margin-bottom,margin:0 auto居中布局等 属性:ma

左边logo 右边广告图片布局 div css左右浮动布局实例

左边logo 右边广告图片布局(div css左右浮动布局实例) 一般网页头部是左边网站标志logo,右边为广告图片或电话号码图片,这里DIVCSS5为大家介绍对float浮动使用实例布局介绍. 需要div+css布局案例效果图需要div+css布局案例效果图(缩小)一.DIVCSS5实例布局技术点说明 - TOP 1.图片切出说明:首先切好左边logo图片,右边广告图片(切图注意不影响图片质量情况尽量宽度高度尺寸切小).2.采用float:left和float:right布局:一般遇到内容靠左

PHP.3-DIV+CSS标准网页布局准备工作(上)

DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标准中,已经不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位.通过使用div盒子模型结构将各部分内容划分到不同的区块,然后用css来定义盒子模型的位置.大小.边框.内外边距.排列方式等.简单地说,div用于搭建网站结构(框架).css用于创建网站表现(样式/美化).该标准简化了HTML页面代码,获

css实现左右布局

css实现左右布局显示是前端进行页面设计的基础,也是全面了解并学习css一个很好的切入点,因为其中会涉及到对许多css基础点的认知.实现css入门,理解左右布局的实现方式是必经之路,同时也能使我们在项目中涉及前端编码的部分受益. 下面我们就介绍自己总结的7种css实现前端左右布局的方式,如还有其他方式,请告诉我. 1. table---table的li实现 实现原理: table标签是能够具有实现左右布局的属性,也是我们项目中使用最多的.table布局也是页面布局中使用的最早的布局方式,随着前端

DIV+CSS网页标准化布局(二)之浮动布局

盒模型以及浮动布局 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式. 先上图: 上图清晰的表明了盒模型的具体表现样式: margin外边距+border边框+padding内边距+content内容: 既然盒模型叫做盒模型~那么我们可以把它比作一个 液晶屏幕包

DIV+CSS网页标准化布局(一)

1.DIV+CSS定义及优势 Div+css 是什么? Div+css 是一种目前比较流行的网页布局技术 Div 来存放需要显示的数据(文字,图表..) , css 就是用来指定怎样显示, 从而做到数据和显示相互的效果 Div+css 优势 采用DIV+CSS模式的网站具有以下优势: 表现和内容相分离 代码简洁,提高页面浏览速度 易于维护和改版 提高搜索引擎对网页的索引效率 我们可以简单的这样理解div+css: div 是用于存放内容(文字,图片,元素)的容器. css 是用于指定放在div中

Bootstrap页面布局8 - BS常用标签与样式

常用的Css文字标签 一. <p>文字段落Start,<strong>重要的文字</strong>,<em>倾斜的文字用来提示</em>,<abbr class='initialism' title="Content Management System">cms</abbr>是"Content Management System"的简称,文字段落End</p> 说明: 标

css+div网页布局常见错误总汇

CSS+DIV是网站标准(或称“WEB标准”)中常用的术语之一,体感音波通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css div的方式实现各种定位.应用应用DIV+CSS编码时很轻易犯一些错误.本文列举了一些常见的错误: 1. 检查HTML元素标签是否有拼写错误.是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系.可以用dreamweaver的验证功能检查一下有无错误. 2. 检查CSS是否正确 检查