css定位(positon)

在css的属性的列表中,定位属性(position)可以说是非常重要的,因为我们网页的布局,每个元素的位置的确定都离不开定位,因为定位的存在,所以我们的网页才会井井有条,错落有致。而且,定位也是我们面试时面试人员很喜欢询问的问题。他的重要性,不须要我在强调了。

对许多刚刚接触css定位的同志来说,可能运用其定位属性,都能达到自己所需要的效果,但说到理解,就显得理论匮乏,而不知所以然。所以我认为有必要,仔细的说一说定位的原理让我知其然,还要知其所以然,废话不多说,开始进入正题吧。

定位属性有三种属性值:1.relative;2.absolute;3.fixed;

(一)相对定位(relative)

所谓相对定位,就是相对自己本身的位置,作为参考,通过top,left,right,bottom来微调,(这里注意:是微调,也就是说不能大幅度的调节位置,这受他的特点限制的)

(1)特点:1.人走威风在;

就是说,我虽然离开的这个位置,但是你们其他任何元素都不能占用我之前的位置(就是这么霸道);而且我还要继续去我想去的地方。(那里也是我的)

来个例子:

正事因为这个特点,所以第三个盒子才没有侵占box2的位置。

2.不脱离标准文本流;

从上面的例子,很容易看出,box2虽然定位了,但是他仍然身居在标准文本之内。

(2)使用相对定位的情况:

1.对自己所处的位置进行微调;

2.作为父元素,当自己的子元素有使用绝对定位时,作为子元素的参考(子绝父相)

(二)绝对定位(absolute)

绝对定位有两种:1.以top实现定位:2.以bottom实现定位

先说一下绝对定位的特点:1.绝对定位脱离标准文档流;可以设置宽高了;

2.绝对定位的参考位置不固定,需要根据定位的元素确定;

(1)以top实现定位的情况

首先我要告诉大家,此时绝对定位元素参考的位置,是页面的左上角。

看个例子:

(2)以bottom实现的定位

和top不同,以bottom来实现定位,他参考的是我们首次打开浏览器首屏网页的左下角为参考点。

细心的你会发现,angelababy的背景发生了变化,但我们的div块,好像还是停留在原来的位置没有发生变化。这就是以bottom实现定位的特点。

我们再来看一个面试题:

通过这个面试题,我想你应该掌握了以bottom实现定位的原理了。

(3)子绝父相

就是说这种情况下,我们以已经定位父元素作为参考,来调节自己的位置,这里定位的不一定只能是其父亲,可以是他任何已经定位的祖先元素,定位元素选择距离本身最近的,已经定位的祖先元素作为参考点。

这种定位很好理解的,就不多了。

(3)固定定位(fixed)

这种定位是以浏览器窗口的左上角为参考点。

特点:1.元素脱离标准文本流;

2.不跟随网页的移动而移动,像是固定在窗口一样;

fixed这个属性值就是固定的意思,在背景属性里也有fixed属性值:background-attachment:fixed;它也是相对于窗口固定的意思,这就不多说了。

固定定位也是很好理解的,一点就通的那种,在网页上得效果是这样的:

时间: 2024-11-07 21:34:35

css定位(positon)的相关文章

css定位positon

值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定. fixed 生成绝对定位的元素,相对于浏览器窗口进行定位. 元素的位置通过 "left", "top", "right" 以及 "bottom"

CSS入门教程——定位(positon)

CSS入门教程——定位(positon) CSS定位在网页布局中是起着决定性作用. 定位 CSS的定位功能是很强大的,利用它你可以做出各种各样的网页布局.本节就介绍一些CSS常用的定位语句. 1.相对定位(relative) 相对定位是指相对它本来应该处的位置所做的移动. …… <style type="text/css">.dingwei{ position:relative; left:50px;} </style> …… <p>我是一段正常的文

CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制

float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;display: inline-block; 有些时候可以替代float实现相同的效果.position: absolute|relative; 要配合top,left等定位; position: absolute会导致元素脱离文档流,被定位的元素等于在文档中不占据任何位置,在另一个层呈现,可以设置z-index.PS的图层效果就是position: absolute. float也会导致元素脱离文档流

CSS定位

一.属性定位(百度首页) 1.通过id定位:(#代表id) driver.find_element_by_css_selector("#kw").send_keys("selenium") 2.通过class定位:(.代表class) driver,find_element_by_css_selector(".s_ipt").send_keys("selenium") 3.通过标签定位:(不推荐) driver.find_el

CSS 定位 (Positioning) CSS 外边距合并 CSS 相对定位

CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置.显然,这个功能非常强大,也很让人吃惊.要知道,用户代理对 CSS2 中定位的支持远胜于对其它方面的支持,对此不应感到奇怪. 另一方面

CSS 定位和选择器

CSS 定位 CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 一切皆为框 div.h1 或 p 元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框”.与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”. 使用 display 属性改变生成的框的类型.这意味着

web前端css定位position和浮动float

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

2.4 CSS定位

1. CSS定位机制 普通流  浮动  绝对布局 2. CSS position 属性 static        left right top bottom属性无效 relative absolute fixed         滚动时固定不动 3. 覆盖顺序 z-index 值越大越在上面 4. 浮动 float = left, right, none, inherit(父级继承) clear去掉浮动属性

div+css定位position详解

div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局的多样性,让我们的网页丰富多彩起来. 首先解释relative(相对定位),顾名思义,定位是相对的,那他是相对于什么呢?参照物是什么? 看如下代码: 2 2.预览效果,现在是三个并列的div 3 3.给中间的div增加定位属性:position:relative; top:10px; left:10