position定位,CSS入门必备, 好像以后有个更厉害的flex!

定位

可通过position属性还设置元素的定位。

  ?可选值:static 默认值 没开启

?       relative 开启相对定位

?       absolute 开启绝对定位

?       fixed 开启固定定位(绝对定位的一种)

  开启定位后可通过left、right、top、bottom四个属性来设置元素偏移量。

  left:元素相对于其定位位置的左侧偏移量。(距离左边多少 ——— 向右移)

  通常只需选择其中两个就可对元素进行定位。(水平垂直方向各一个)

relative

  1、相对定位指相对于元素在文档流中原来的位置进行定位。

  2、开启相对定位的元素不会脱离文档流。故相对定位不会改变元素性质,

     即块还是块,内联还是内联。

  3、相对定位会使元素提升一个层级。(定位元素可以盖住文档流元素)

  4、开启相对定位而不设置偏移量时元素不会发生任何变化。

  .box1{

?     position:relative;

?     left:100px;

  }

absolution

  1、绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的。

?     若所有的祖先元素都没有开启定位,则相对于浏览器的窗口。

    ? 故一般开启了子元素的绝对定位都会同时开启父元素的相对定位。

  2、开启绝对定位的元素会脱离文档流。故绝对定位会改变元素性质,

    内联会变成块,块的宽高默认都被内容撑开。

  3、绝对定位也会使元素提升一个层级。

  4、开启绝对定位而不设置偏移量时元素位置不变化。

fixed

与绝对定位不同的地方:

  1、固定定位永远相对于浏览器窗口进行定位。

  2、固定定位会固定在浏览器窗口的某个位置,不会随着滚动条而滚动。

    (广告、视频、回到顶部等)

  3、ie6不能兼容固定定位。

元素的层级

  1、若定位元素的层级一样,则下边的元素会盖住上边的元素。(代码后写的盖住先写的)

  2、可通过z-index属性来设置元素的层级。

?     为z-index指定一个正整数作为其值,该值将会作为当前元素的层级。

?       a、层级越高,越优先显示;

?       b、父元素的层级再高,也不会盖住子元素;

?       c、对于没有开启定位的元素不能使用z-index.

背景图片

  1、设置背景图片的重复方式:

?     可选值:repeat 默认值(双方向重复)

?         no-repeat 不重复(有多大就显示多大)

?         repeat-x 背景图片沿水平方向重复

?         repeat-y 背景图片沿垂直方向重复

  2、若背景图片大于元素默认显示图片的左上角,一样大就全部显示,小于就平铺。

  3、语法:background-image:url(相对路径);

  4、可同时给一个元素指定背景颜色和背景图片,则背景颜色将成为图片底色。

    (一般同时指定)

  5、背景图片默认贴着元素的左上角显示。

?     可通过background-position来调整背景图片在元素中的位置。

?       a、该属性可使用top、bottom、left、right、center中的两个值来指定。

?         如果只给一个值,则第二个之默认为center。

?         “九宫格“ top left 左上; center center 居中;

?       b、也可直接指定两个偏移量: 水平偏移量 垂直偏移量

  6、可通过background-attachment设置背景图片是否随页面一起滚动。

?     可选值:scroll 默认值 背景图片随窗口滚动

?         fixed 背景图片会固定在某一位置 (不随窗口滚动的图片一般设置给body)

  7、背景的简写属性

?    background属性可同时设置所有背景相关样式。

    无顺序、数量要求,不写的样式则使用默认值.

? 示例:background:#bfa url(img/1.jpg) center center no-repeat fixed;

原文地址:https://www.cnblogs.com/isremya/p/12432062.html

时间: 2024-11-08 21:36:37

position定位,CSS入门必备, 好像以后有个更厉害的flex!的相关文章

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

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

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

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

CSS.04 -- 浮动float、overflow、定位position、CSS初始化

标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right :  设置浮动的元素,脱离标准流 可能的值 描述 left 元素向左浮动. right 元素向右浮动 none 默认值,元素不浮动,并会显示在其在文本中出现的位置 inherit 规定应该从父元素继承float属性的值   特点:浮动找浮动,不浮动找不浮动 浮动只影响后面的元素 浮动以元素顶部为基准对齐 浮动可是实现模式转换(span设置浮动可以设置宽高 ) 让块级元素在一行

归纳篇(一)CSS的position定位和float浮动

近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.relative:生成相对定位的元素,相对于其所在普通的文档流位置进行定位: 3.static:默认值,没有定位,元素出现在正常的文档流中; 4.fixed:老IE不支持,和absolute一致,相对于窗口进行定位,当出现滚动条时,不随着滚动而滚动: 5.sticky:(CSS3)有兼

浅析CSS——元素重叠及position定位的z-index顺序

元素位置重叠的背景常识 (x)html文档中的元素默认处于普通流(normal flow)中,也就是说其顺序由元素在文档中的先后位置决定,此时一般不会产生重叠(但指定负边距可能产生重叠).当我们用css为某个元素指定 float浮动或者position定位后,元素的定位将会依情况发生如下改变: 1. 指定float值left/right 行内元素也会隐形变成块元素,元素会脱离文档的普通流,向左或右浮动,直到其外边缘碰到包含框或另一个浮动框. 2. 指定position值relative 可以相对

Css中Position定位属性与层级关系

今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Css中Position定位属性与层级关系</title> 6 <style type="text/css"> 7 #W{ 8

CSS Position 定位属性

1. 介绍 1.1 说明 Position 属性:规定元素的定位类型.即元素脱离文档流的布局,在页面的任意位置显示. 1.2 主要的值 ①absolute :绝对定位:脱离文档流的布局,遗留下来的空间由后面的元素填充.定位的起始位置为最近的父元素(postion不为static),否则为Body文档本身. ②relative :相对定位:不脱离文档流的布局,只改变自身的位置,在文档流原先的位置遗留空白区域.定位的起始位置为此元素原先在文档流的位置. ③fixed :固定定位:类似于absolut

css position定位

CSS Position(定位) position 属性指定了元素的定位类型.直线模组价格 position 属性的五个值: static relative fixed absolute sticky 元素可以使用的顶部,底部,左侧和右侧属性定位.然而,这些属性无法工作,除非是先设定position属性.他们也有不同的工作方式,这取决于定位方法. static 定位 HTML 元素的默认值,即没有定位,遵循正常的文档流对象. 静态定位的元素不会受到 top, bottom, left, righ

CSS入门之引用、选择器、属性(六分之三)

CSS 入门教程六分之三篇 没办法,我直播教小伙伴CSS入门,属性讲完,准备说定位的时候,他们就喊停,hold不住了...所以先写到六分之三,23333333 要点 解释 引用 如何使用定义的CSS样式方式 选择器 指明被定义样式的标签 属性 样式定义时具体定义的内容 定位 如何将标签放置到具体的位置(下篇) 盒模型 面试经典题(下篇) 显示 如何显示标签与标签布局(下篇) 引用 内联 开标签或自闭合标签的style属性上写明对应的CSS定义内容,即为内联方式引用,如下: <div style=