css定位讲解

定位分三种:相对定位,绝对定位,固定定位;

    相对定位:position:relatve;

    绝对定位:position:absolute;

  固定定位:position:fixed;

一,相对定位

1,相对定位:

  1)相对定位就是微调元素的位置,让元素相对自己的原来位置,进行位置调整;

  2)不脱标,实际上还是原来的位置;

2,相对定位的用途:

相对定位有坑,所以一般不用于做“压盖”效果。页面中,效果极小。就两个作用:

  1)微调元素;

  2)做绝对定位的参考,(子绝父相);

二,绝对定位1,脱离文档流:

  绝对定位后,标签就不会区分行内元素与块级元素,不用display转换就可以改变高宽;

2, 1)绝对定位参考点是页面的左上角,而不是浏览器的左上角; top定位;

2)用bottom定位就是浏览器首屏窗口尺寸,对应的左下角;

3,以盒子为参考点

一个绝对定位的元素,如果父辈元素中出现了也定位的元素,那么将以父辈这个元素为参考点;

  注意:1)不一定是相对定位,任何定位,都可以作为参考点;

    2)绝对定位的儿子,无视参考的那个盒子的padding,找border的内侧为参考点;"子绝父相"才有意义,父亲不脱标,儿子脱标在父亲的范围里面移动;

4,绝对定位的盒子居中:

    margin:0 auto;失效

    解决方法:

        left:50%;

        margin-left:负的宽度一半;

下面有个小问题不错:

三,固定定位

固定定位就是相对浏览器窗口定位,页面如何滚动,这个盒子的显示位置不变;

position:fixed;

四,z-index

1,z-index值表示谁压着谁大,数值大的压盖住数值小的;

2,前提是有定位了的元素,才能有z-index值,不管相对,固定,绝对定位都可以使用z-index,而浮动不能用;

3,z-index值没有单位,就是一个正整数。默认的z-index值是0。

4,如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面能压住别人。定位了的元素,永远能够压住没有定位的元素。

5, 从父现象:父亲怂了,儿子再牛也没用。

 

时间: 2024-10-17 01:07:12

css定位讲解的相关文章

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

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

web前端css定位position和浮动float

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

css定位机制

CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定. 块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来. 行内框在一行中水平布置.可以使用水平内边距.边框和外边距调整它们的间距.但是,垂直内边距.边框和外边距不影响行内框的高度.由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框.不过,设置行高可以增加

说说css定位的事

CSS定位机制 CSS有三种基本的定位机制:普通流.浮动和绝对定位. 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中的元素的位置由元素在X(HTML)中的位置决定. 块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来. 行内框在一行中水平布置.可以使用水平内边距.边框和外边距调整它们的间距.但是,垂直内边距.边框和外边距不影响行内框的高度.由一行形成的水平框称为行框(LineBox),行框的高度总是足以容纳它包含的所有行内框.不过,设置行高可以增加这个框的高

【Selenium 3+Java自动化(6)】-CSS定位语法

一.前言 本章节讲解一下CSS定位. CSS定位相对于XPath定位的优点是:css定位更快,语法更简洁. 这一篇css的定位方法,主要是对比上一篇的xpath来的,基本上xpath能完成的,css也可以做到.两篇对比学习,更容易理解. 二.CSS:属性定位 1.通过id属性定位,需要加上标识符"#",如:#kw: element = driver.findElement(By.cssSelector("#kw")); element.sendKeys("

CSS定位:几种类型的position定位的元素

当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来说,有一些东西会绊倒新手,所以在它成为你的惯用技巧前你需要掌握它们. 一旦你更深入地了解了它是怎么运作的,你就能够做出一些更棒的事情来. CSS盒模型和定位的类型 为了搞清楚定位首先你得了解CSS盒模型.在上一句中的链接是我写在InstantShift 中的一篇关于盒模型的文章.我在那篇文章做了详细

CSS 定位(待续...)

一.CSS 定位和浮动 它们代替了多年来的表格布局. 定位的思想很简单,相对于正常位置.相对于父元素.另一个元素甚至是浏览器窗口的位置. 浮动在 CSS1 中被首次提出.浮动不完全是定位,当然也不是正常的流布局. 二.一切都是框 display 属性设置元素是什么框类型.其属性为 block.inline.none 时,分别表示块级元素.行内元素和不显示(也不占用文档的空间). 三.定位机制 有三种基本的:普通流.绝对定位和浮动. 在下面的小节里,会给你详细讲解相对定位.绝对定位和浮动. 四.定

CSS 定位 (Positioning)

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

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