`
tntxia
  • 浏览: 1481507 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

使用CSS定位元素

阅读更多

 

一、定位的基本概念

 

一般我们定位元素都使用绝对定位,因为绝对定位是最容易掌握的定位方式。但结合其他定位方式,我们可以设计更加灵活的页面。

 

CSS控制定位的属性为:Position

 

CSS中关于定位(position)是这样定义的:
  定位(position):允许用户精确定义元素框出现的相对位置,可以相对于它通常出现的位置,相对于其上级元素,相对于另一个元素,或者相对于浏览器视窗本身。每个显示元素都可以用定位的方法来描述,而其位置由此元素的包含块来决定的。

 

他的允许值有三个:static,relative和absolute

 

static为默认属性。relative为相对定位,absolute为绝对定位。

 

static :        默认值。无特殊定位,对象遵循HTML定位规则
absolute:      将对象从文档流中拖出,使用 left , right , top , bottom     

                     等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。

                     如果不存  在这样的父对象,则依据 body 对象。而其层叠通过         

                     z-index 属性定义 fixed :  未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范

relative :      对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置

 

 

检索对象的定位方式。设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠。此时对象不具有外补丁( margin ),但仍有内补丁( padding )和边框( border )

 

要激活对象的绝对(absolute)定位,必须指定 left right top bottom 属性中的至少一个,并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ,这将导致对象遵从正常的HTML布局规则,在前一个对象之后立即被呈递。设置此属性值为 relative 会保持对象在正常的HTML流中,但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的,在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外,滚动条不会出现。内容的尺寸会根据布局确定对象的尺寸。例如,设置一个 div 对象的 height position 属性,则 div 对象的内容将决定它的宽度( width )。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 position

 

 

二、各种定位区别

 

1. 相对定位

相对定位是一个非常容易理解的概念,如果对一个元素进行相对定位,它将在他所在的位置上,然后可以通过设置垂直和水平的位置,让这个元素‘相对于’起点进行移动,如果将top 设置为20px,那么框就会出现在原位置顶部下面20px的地方,如果将left 设置为20px 那么框就会向右移动20px

 

#mybox{ Position:relative; Top:20px; Left:20px; }


 

 

如下图:

 

 

 

 

使用相对定位时,无论是否进行移动,元素仍然占据原来的空间,因此移动元素会导致它覆盖其他框。

 

2.绝对定位

相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。与之相反,绝对定位使元素的位置与文档流无关,因此不占据空间。普通文档流中其他元素的布局就像绝对定位的元素不存在时一样。

 

把相对定位中的代码改成absolute

则会变成这样:

 

 

 

 

 

绝对元素的位置相对于最近已定位的祖先元素。如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。根据用户代理的不同,最初的包含块。根据代理的不同可能是画布或HTML

与相对定位的框一样,绝对定位的框可以从它的包含块向上,下左,右移动。这提供了很大的灵活性。可以直接将元素定位在页面上的任何位置。

 

 

因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素,可以通过设置z-index属性来控制这些框的堆放次序。Z-index值越高,框在堆中的位置就越高。

 

 

 

 

  • 大小: 4.3 KB
  • 大小: 4.1 KB
分享到:
评论

相关推荐

    CSS定位元素的综合实例应用

    /*用绝对定位抽离正常文本流,不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/ top:5px;/*这里的5px是与信息面板大盒子的填充一样的*/ left:5px; } dl { width: 160px; float:right; color: #999; line-...

    css元素常见定位应用.html

    对定位属性值进行详解,和...在本文中,任何一个元素都被文本流所限制了自身的位置,但是通过CSS我们依然使得这些元素可以改变自己的位置,我们可以通过float来让元素浮动,我们也可以通过margin来让元素产生位置移动。

    CSS 定位网页元素.pdf

    CSS 定位网页元素

    CSS教程——元素定位

    CSS教程——元素定位CSS教程——元素定位

    CSS设置元素width=100%失效的一种解决方式(该元素的父元素为body).pdf

    CSS设置元素width=100%失效的一种解决方式(该元素的父元素为body)

    CSS伪元素:after:before的特殊用法demo

    伪元素实现tooltip,nav导航栏的炫酷效果以及计数器

    20190801-css相对定位.txt

    css 相对定位 设置为相对定位的元素框会偏移某个距离。元素仍然保持其为定位前的形状,它原本所占的空间仍保留。...使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

    使用css3实现动态效果

    1.需要对网页进行设计,可以使用传统的div+css设计,里面的元素可以使用position定位,或者float定位,或者flex布局。 2.需要使用css3中的至少两种效果,并且用到css3的地方请注释,例如阴影效果,动画效果,2D转换...

    css position 设置元素的定位方式详解

    1、定位元素(positioned element)是计算后位置属性分为: relative(相对)、absolute(绝对) 、 fixed(固定) 或 sticky (粘性)的元素。 2、top 、right、bottom、left属性指定定位元素的位置。 3、Z-index ...

    CSS元素的浮动与定位综合案例3.pdf

    CSS元素的浮动与定位综合案例3.pdf 学习资料 复习资料 教学资源

    css中子元素设置margin-top为什么影响了父元素

    本文介绍了css中子元素设置margin-top为什么影响了父元素,分享给大家,具体如下: <style type="text/css"> *{ margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; height: ...

    纯CSS定位的固定垂直居中浮动层代码,附经典解说:《详解定位与定位应用》

    在本文流中,任何一个元素都被文本流所限制了自身的位置,但是通过CSS我们依然使得这些元素可以改变自己的位置,我们可以通过float来让元素浮动,我们也可以通过margin来让元素产生位置移动。但是事实上那并非是真实...

    第十三课 css元素、定位与浮动-011

    ①CSS 行内元素 ②CSS 区块元素 ③CSS 内联块元素

    CSS实现定位元素居中的方法

    主要介绍了CSS实现定位元素居中的方法,主要涉及到transform和margin的使用,需要的朋友可以参考下

    css中的定位

    css定位 html元素定位 static relative absolute fixed详细讲解,带图。

    css 中的定位详解

    这可能不是直接父元素,如果 AP 元素的父元素使用静态定位,即不会被认为是已定位的,所以 AP 元素在文档树中继续向上寻找已定位的祖先。可能会一直沿着文档树向上寻找,直到找到 body 元素(它被认为是已定位的),并...

    利用CSS3的定位页面元素

    让我们通过完成一下的实例来了解一下如何在不使用无用的class和id属性的情况下利用CSS3定位页面元素。 相关下载:CSS3.0参考手册下载使用一个唯一的日志(post)ID定位所有日志 wordpress提供给我们一种包含了ID的每篇...

    css定位学习小结.md

    作用:检索或者设置元素的定位方式(改变元素位置的属性) *定位分为静态定位,绝对定位,相对定位,固定定位,粘性定位* (1)static 静态定位: position的默认值,默认文本流的状态。 不会识别left ...

    css-animator, 使用支持 Angular的CSS类对元素进行动画处理.zip

    css-animator, 使用支持 Angular的CSS类对元素进行动画处理 css动画在 animate.css 库中使用CSS动画,在没有可用的动画生成器的情况下,这个包是created的。CSS动画程序适用于任何JavaScript应用程序,并且不需要...

    基于文档流解读html元素的(css)定位形式

    基于文档流解读html元素的(css)定位形式 每个非浮动块级元素都独有一行, 浮动元素则按规则浮在行的一端. 若当时行容不下, 则另起新行再浮动。  内联元素也不会独有一行. 简直一切元素(包括块级,内联和列表元素)均...

Global site tag (gtag.js) - Google Analytics