使用position属性,会激活5个属性

  • left
  • right
  • bottom
  • top
  • z-index(-1至999)

注:z-index:会改变内容的层级关系,

1、绝对定位

position: absolute

影响:

  • 元素会脱离文档流==元素原本占据空间释放
  • 原点计算:最近一个有定位的父元素作为原点参考,如果没有,跟页面(0,0)作为参考
  • 绝对定位是内嵌元素时,也可以设置宽高。

实例:

 .div1{
width: 400px;
height: 400px;
background-color: greenyellow;
position: absolute; *绝对定位,在本身的位置浮动起来了*/
left: 0px; * left,right设置宽高有效,必须在使用定位后设置后*/
right: 0px;
}

2、相对定位
position: relative;

  • 没有脱离文档流,原本元素在标准文档流之中占据的位置不会释放不会像-->
  • 根据自身在文档流的位置作为原点计算
  • 父相子绝
  • 能保证文档流不受影响
  • 能给子元素做一个参考点

.实例:

 div1{
position: relative;
width: 200px;
background-color: red;
height: 200px;
left: 70px
}

.div1_1{
width: 100px;
height: 100px;
position: absolute;
/*position: relative;*/
background-color: yellow;
left: 70px;
}
 <div class="div1">、、、、、、、、、、、父
<div class="div1_1"></div>、、、、子
</div>
<div class="div2"></div>、、、、、、、父兄

注:子父元素相对定位时,子元素会浮在父元素上面。

3、固定定位

  • 脱离文档流
  • 原点根据浏览器窗口(0,0)根父元素没有任何关系,不会跟父元素走
  • 能保证文档流不受影响
  • 能给子元素绝对定位提供原点参考。

实例:

 .div3{
width: 300px;
height: 300px;
background-color: hotpink;
position: fixed;
right: 0px;
border: 0px;
}

对布局定位设置-position的更多相关文章

  1. css定位 与position

    本文同时发表于本人个人网站 www.yaoxiaowen.com 在正式讨论position之前,我们需要知道几个概念. 块元素:独占一行的元素.比如div,h1~h6,p等,它是自带换行的. 内联元 ...

  2. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

  3. 写给后端的前端笔记:定位(position)

    写给后端的前端笔记:定位(position) 既然都写了一篇浮动布局,干脆把定位(position)也写了,这样后端基本上能学会css布局了. 类别 我们所说的定位position主要有三类:固定定位 ...

  4. css之定位(position)

    1.什么是定位: css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设置一些不规则 ...

  5. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性  定位(position)z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  6. css中的定位属性position(转)

    css中的定位属性position   同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...

  7. IE6浏览器不支持固定定位(position:fixed)解决方案(转)

    IE6浏览器不支持固定定位(position:fixed)解决方案   来源:互联网 作者:佚名 时间:12-04 10:54:05 [大 中 小] 点评:有些朋友在进行网页布局时,会遇到IE6浏览器 ...

  8. HTML CSS布局定位

    我们在编写网页代码时,首先应该做的就是设计好页面的布局形式,然后再往里面填充内容.网页布局的好与坏,直接决定了网页最终的展示效果.PC端常见的网页布局形式有两列布局.三列布局等.在CSS中,我们通常使 ...

  9. 0029 定位:position(相对、绝对、固定、绝对定位盒子居中、z-index、绝对定位改变display属性)

    目标 理解 能说出为什么要用定位 能说出定位的4种分类 能说出四种定位的各自特点 能说出我们为什么常用子绝父相布局 应用 能写出淘宝轮播图布局 1. CSS 布局的三种机制 网页布局的核心 -- 就是 ...

随机推荐

  1. 弧形菜单(Android)

    弧形菜单(Android) 前言:公司需求,自己写的一个弧形菜单! 效果: 开发环境:AndroidStudio2.2.1+gradle-2.14.1 涉及知识:1.自定义控件,2.事件分发等 部分代 ...

  2. sql优化1

    1.mysql里面的索引 对于 like关键字匹配查询,适用于like name%,但是不适用于%name%;添加索引时候注意这点 2.mysql的limit分页 ,limit 2,5;表示每页显示5 ...

  3. mybatis支持的jdbc类型

    参考mybatis的枚举JdbcType源码: 关于这些类型mybatis是如何处理可以看一下TypeHandler类的源码.

  4. undo表空间不足,ORA-30036: unable to extend segment by 8 in undo tablespace 'UNDOTBS2'

    故障现象:UNDO表空间越来越大,长此下去最终数据因为磁盘空间不足而崩溃: 问题分析:本问题在ORACLE系统管理中属于比较正常的一现象,产生问题的原因主要以下两点: 1. 有较大的事务量让Oracl ...

  5. Log4j的配置文件

    附:Log4j比较全面的配置 Log4j配置文件实现了输出到控制台.文件.回滚文件.发送日志邮件.输出到数据库日志表.自定义标签等全套功能. log4j.rootLogger=DEBUG,consol ...

  6. 使用mysli防止sql注入

    自从 php5 推出 mysqli 后就开始不提倡使用 mysql_ 开头的接口了,现在使用 mysql_connet 通常调试的时候会报警告说这个不该用 mysqli 使用起来其实更简单 $url ...

  7. July 21st 2017 Week 29th Friday

    If you want to fly too high in relation to the horizon forget. 要想飞得高,就该把地平线忘掉. Always keep our eyes ...

  8. 跳跃表 SkipList【数据结构】原理及实现

    为什么选择跳表 目前经常使用的平衡数据结构有:B树,红黑树,AVL树,Splay Tree, Treep等. 想象一下,给你一张草稿纸,一只笔,一个编辑器,你能立即实现一颗红黑树,或者AVL树出来吗? ...

  9. android之对于view的一点深入理解

    最近在写程序中,遇到了之前自己没遇到过的代码,一番理解后才知道原来是在动态设定xml布局中的属性.即利用LayoutParams可以动态的设定布局或者控件的宽和高,以及的它的左间距,右间距,内间距,和 ...

  10. [原创] SiteServer 3.5 批量导入文章的SQL处理脚本

    2005时做过一个小网站,当时是用ASP+Access做的,功能很简单,但里面的文章不少 现在就像把它转移到SS上来,重点就是如何导入文章 本来SS本身提供了批量导入功能,但对于在WEB上一次性导入一 ...