⑴Static默认值,没有定位。

⑵Absolute绝对定位。后面的元素会补上原来偏移的位置。

⑶Relative相对定位。后面的元素不会补上原来偏移的位置。

⑷Fixed绝对定位。相对于浏览器窗口固定位置。

⑸Z-index设置元素的堆叠顺序。

(6)Clip设置剪裁的元素形状。Clip:rect(top,right,bottom,left)。定义一个形状,元素会被 裁剪到这个形状内。(只能在元素设置了position:absolute或position:fixed才 起作用。且目前只有矩形能使用)

(7)Vertical-align设置元素的垂直对齐方式。

  Baseline默认。元素放在父元素的基线上。

  Top把元素的顶端与行中最高元素的顶端对齐。

  Middle把元素放在父元素的中部。

  Bottom把元素的顶端与行中最低的元素的顶端对齐。

  text-top把元素的顶端与父元素字体的顶端对齐。

  text-bottom把元素的底端与父元素字体底端对齐。

  Sub垂直对齐文本的下标。

  Super垂直对齐文本的上标。

(8)float浮动。

  left元素向左浮动。

  Right元素向右浮动。

(9)clear清除浮动。

  Left清除左浮动。

  Right清除右浮动。

  Both清除所有浮动。

(注意:绝对定位可以层叠,相对定位不可以。相对定位会占据它原来的位置,绝对定 位不会。)

6.css3定位--position的更多相关文章

  1. CSS3 定位| Position研究

    视区(视口) 当浏览者查看一份网页文件时,通常使用者代理(User Agents, UA, 浏览器)会提供给浏览者一个视区(视窗或者是画面里的其它可视区域).当我们调整视区大小时,UA 就有可能会改变 ...

  2. CSS3定位和浮动详解

    本文为大家分享CSS3定位和浮动的基础概念,与使用方法,供大家参考,具体内容如下 一.定位 1. css定位: 改变元素在页面上的位置 2. css定位机制: 普通流: 浮动: 绝对布局: 3. cs ...

  3. css定位position属性深究

    1.static:对象遵循常规流.此时4个定位偏移属性不会被应用. 2.relative:对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进 ...

  4. css 温故而知新 定位(position)与权限(z-index)

    1.进行定位(position)的元素的权限(z-index)永远比没有定位的高. 2.如果两个元素都定位了,无论是相对定位还是绝对定位.他们的权限都是等权的. 3.两个相同定位的元素,除了z-ind ...

  5. 定位 position: absolute & relative

    [position:absolute] 意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级 ...

  6. css定位position认识

    1.绝对定位(position: absolute) 2.相对定位(position: relative) 3.固定定位(position: fixed) 绝对定位 设置position:absolu ...

  7. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  8. 通过定位position="fixed"实现网页内容的固定层效果

    在网页的顶部或者底部导航栏中经常需要使用到固定层的效果,即紧挨浏览器窗口的顶部或底部而网页其他内容的影响. 一.实现 主要通过设置导航栏元素的位置属性position="fixed" ...

  9. [转载]CSS元素的定位position

    CSS元素的定位position 属性position   值 描述 absolute                             生成绝对定位的元素,相对于 static 定位以外的第一 ...

随机推荐

  1. sweetalert2 全面替代 alert ,从 sweetalert2 弹出 text 到 弹出 Dom 以及模态框和取消 sweetalert2 的 OK 按钮

    1. 简易基本版 sweetalert 涵盖日常基本的弹出及对话框 2. 升级版本 sweetalert2 满足常见开发工作中的各种要求 3 取消 OK 按钮, 只需要设置 showConfirmBu ...

  2. oracle调整链接数

    50用户以下:8GB 混用,oracle 占据1GB~3GB内存,open_cursors:300,processes:10050-100用户:16GB 混用,oracle 占据3~4GB内存,ope ...

  3. wannafly 挑战赛8 E 小G的项链(manecher)

    链接:https://www.nowcoder.com/acm/contest/57/E 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536K 64bit ...

  4. 【SpringBoot-创建项目】一.通过Idea创建SpringBoot项目

    一.首先我们通过Idea创建一个新项目 二.选择sdk和快速构建模板 三.填写项目基本信息 三.选择项目依赖 四.填写项目名和本地项目路径 六.完成项目创建,查看项目目录层级 最终:主要是在创建项目的 ...

  5. 一、基础篇--1.1Java基础-重载和重写的区别

    重载和重写的区别 重写: 1.也叫子类的方法覆盖父类的方法,要求返回值.方法名和参数都相同: 2.子类抛出的异常不能超过父类相应方法抛出的异常.(子类异常不能超出父类异常): 3.子类方法的的访问级别 ...

  6. SpringMvc配置自定义视图

    1.在dispatcherServlet-servlet.xml配置自定义视图 <!-- 配置视图 BeanNameViewResolver 解析器: 使用视图的名字来解析视图 --> & ...

  7. 四、IDEA创建SpringBoot项目

    1.从官网下载之后直接导入IDEA: 下载完成解压之后如下图: IDEA导入该项目: 之后一路next即可 导入成功之后你可能会发现左下角一直有个进度条在进行,傻傻的同学可能以为是在下载jar包,下个 ...

  8. iOS OC中桥接swift第三方库

    swift中有一些比较好的框架,比如绘图框架charts,最近项目中刚好用到,通过Pod的方式直接导入,xcode会自动生成charts-swift.h的文件,然后在需要导入的地方import < ...

  9. 阶段2 JavaWeb+黑马旅游网_15-Maven基础_第1节 基本概念_03maven一键构建概念

    资料里面写好的Helloworld项目 pom.xml存放jar包的坐标 首先复制项目所在的目录的路径: 先进去复制的这个路径,然后又输入了d盘.这时候就进去到这个项目目录了. 这个项目就运行起来了. ...

  10. 那些堪称神器的 Chrome 插件

    Chrome 的简洁快速以及丰富的插件种类使得它在国内日益盛行,帮助了我们很多 Chrome 用户提升了工作效率,而今天要给大家推荐8款实用甚至堪称神器的 Chrome 插件,希望对提升大家的工作效率 ...