使用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. EF单实对应多表

    一.单实体对应多表 适用场景主表,拥有相同主键附属表或扩展表. 1. 建表词句 CREATE TABLE [Chapter2].[Product]( [SKU] [int] primary key , ...

  2. 添加CentOS扩展源

    参考: http://blog.onovps.com/archives/centos-yum-epel.html https://fedoraproject.org/wiki/EPEL/zh-cn h ...

  3. Python学习系列----第三章 控制流

    在python中有三种控制流语句,分别是: if.for.while. 2.1 if 语句 if 语句用来检验一个条件,如果条件为真,我们运行一块语句(称为 if-块),否 则我们处理另外一块语句(称 ...

  4. 面对IBM与亚马逊的犄角攻势,微软云如何招架?

    亚马逊AWS和微软Azure是全球公有云的焦点.不就前公布的财报不久前公布的财报,这两家公司云计算的收入越来越接近,从数据显示来看,亚马逊的利润比微软稍高,有人称微软云的高增长来自于捆绑销售,背后真正 ...

  5. Ubuntu安装使用pyltp和StanfordCoreNLP

    环境:Ubuntu 16.04+anaconda3 一.pyltp 1. 安装 直接用pip安装: pip install pyltp 然后下载语言模型库,网址:https://pan.baidu.c ...

  6. 使用UIWebView中html标签显示富文本

    使用UIWebView中html标签显示富文本 用UIWebView来渲染文本并期望达到富文本的效果开销很大哦! Work 本人此处直接加载自定义字体"新蒂小丸子体",源码不公开, ...

  7. 记一种c++字符串格式化方法

    std::string str_fmt(const char * _Format, ...) { std::string _str; va_list marker = NULL; va_start(m ...

  8. 【[USACO09DEC]牛收费路径Cow Toll Paths】

    很妙的一道题,我之前一直是用一个非常暴力的做法 就是枚举点权跑堆优化dijkstra 但是询问次数太多了 于是一直只有50分 今天终于抄做了这道题,不贴代码了,只说一下对这道题的理解 首先点权和边权不 ...

  9. Linux实用指令(2)

    cat指令     cat 查看文件内容,只读的方式 • 基本语法     cat [选项] 要查看的文件 • 常用选项     -n :显示行号 • 应用实例   注意:cat 只能浏览文件,而不能 ...

  10. vue2中用swiper

    一.安装swiper npm install --save swiper 二.home组件 //home.js <app-banner :listImg="bannerList&quo ...