它有四大特性,页面找不到盒子的情况

1.z-index值表示谁压着谁,数值大的压盖数值小的
2.只有定位了的元素,才有z-index.也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index.而浮动元素不能使用z-index
3.z-index值没有单位,就是一个正整数.默认的z-index值为0如果没有z-index值.或者z-index值一样,那么写在HTML后面,谁在上面.定位的元素,永远压住没有定位的元素
4.从父现象:父盒子怂了..子盒子在厉害也没用

定位

一.定位

定位有三种

1.相对定位

2.绝对定位

3.固定定位

这三种定位,都有各自的特性,有待更新

二.相对定位

相对定位:相对于自己原来的位置定位

现象和使用:

1.如果对当前元素仅仅设置了相对定位,那么与标准的盒子什么区别

2,设置相对定位之后.我们才可以使用四个方向的属性:top.right.bottom.left.

特性:

1.不脱标

2.形影分离

3.原来的位置会有占位现象

所以说相对定位在页面中没有太大的作用.影响我们的页面的布局.我们不要使用相对定位来做压盖效果

用途:

1.作为微调元素的位置

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

参考点:

自己原来的位置坐参考点

绝对定位

特性:

1.脱标

2.做遮盖效果.提高了层级.设置绝对定位之后.不区分行内元素和块级元素,都能设置宽高

参考点(重点):

一,单独一个绝对定位的盒子

1.当我men使用top属性描述的时候是以页面的左上角(跟浏览器的左上角区分)为参考点类调整位置

2.当我们使用bottom属性描述的时候,是以首屏页面左下角为参考点来调整位置

二,以父辈盒子作为参考点

1.父辈元素设置相对定位,子元素设置绝对定位,那么会以父辈元素左上角为参考点,这个父辈元素不一定是父盒子,也有可能是父盒子的父盒子或者在上一辈的盒子

2.如果父亲设置了定位,那么以父盒子为参考点,那么如果父盒子没有设置定位,那么以父辈元素设置定位的为参考点

3.不仅仅是父相子决,父绝子绝,父固子绝都是以父辈为参考点

注意点:

1.父绝子绝,没有实战的意义,做项目的时候不会出现父绝子绝.因为绝对定位脱离标准流.印象页面的布局,没有实战意义,相反'父相子决'在我们页面布局中,是常用的布局方案,因为父盒子设置相对定位,不脱离标准流.子元素设置绝对定位,仅仅的是在当前父辈元素内调整该元素的位置

2.绝对定位的盒子无视父辈盒子的padding

绝对定位的盒子居中

方便使用的方法:

*{
padding: 0;
margin: 0;
}
.box{
width: 100%;
height: 69px;
background: #000;
}
.box .c{
width: 960px;
height: 69px;
background-color: pink;
/*margin: 0 auto;*/
position: relative;
left: 50%;
margin-left: -480px; /*设置绝对定位之后,margin:0 auto;不起任何作用,如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位,然后left:50%; margin-left等于元素宽度的一半,实现绝对定位盒子居中*/
}

固定定位

固定当前的元素不会随着页面滚动而滚动

特性:

1.脱标

2,遮盖.提升层级

3.固定不变

参考点:

设置固定定位,用top描述,那么是以浏览器的左上角为参考点

如果用bottom描述,那么是以浏览器的左下角为参考点

作用:1.返回顶部栏2.固定导航栏3.小广告

css中定位功能的特性的更多相关文章

  1. CSS 中定位的使用

    position relative 设置区块基准点为左上角(相对定位 以区块的左上角为基准点 仍然会暂居原来的位置) a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元 ...

  2. css中定位

    一切皆为框div.h1或p元素尝尝被称为块级元素.这意味着这些元素显示为一块内容,即“块框”.与之相反,span和strong等元素称为“称为”行内元素“,这是因为他们的内容显示在行中,即”行内框“. ...

  3. CSS中定位机制的想法

    对于一个刚刚接触css的新手而言,CSS的定位机制可能是最让人头疼的一件事情了, 接下来我们了解一下CSS的定位机制. position:static | relative | absolute | ...

  4. CSS中定位position

    毋庸置疑的是,pisition是css中是最重要的属性之一. 一共有四种定位方式,static.relative.absolute.fixed. 默认的定位方式static 页面中所有的元素默认都是s ...

  5. CSS中定位和浮动对行内元素的宽高的影响

    行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者posit ...

  6. CSS学习笔记——CSS中定位的浮动float

    昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么 ...

  7. CSS 中定位方式有几种,说明他们的意义

    1.static  默认定位方式 显示为没有设置定位时的位置 2.fixed(固定定位)  他所相对固定的对象是可视窗口,与其他无关.以浏览器窗口作为参考进行定位 3.relative(相对定位) 元 ...

  8. 认识CSS中布局之文档流、浮动、定位以及叠放次序

    前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通 ...

  9. CSS中的定位与浮动

    CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...

随机推荐

  1. Ceph学习之路(三)Ceph luminous版本部署

    1.配置ceph.repo并安装批量管理工具ceph-deploy [root@ceph-node1 ~]# vim /etc/yum.repos.d/ceph.repo [ceph] name=Ce ...

  2. while、for循环控制之if、else

    if # score=99 # if score>90: # print('优秀') # elif score<60: # print('不及格') # else: # print('良好 ...

  3. CSS3新增特性详解(二)

    上篇博文主要介绍了CSS3新增特性中的静态特性,比如新的选择器.多背景图.阴影.渐变等.本文主要介绍CSS3中新增的动态特性,如过度.动画.变形等. transitian:  -webkit-tran ...

  4. futuba R70085SB 接收机 只有SBus端口有输出其他端口输出不变

    接收机能收到遥控器信号,且Sbus端口有输出,其他端口输出没有变化,这时你要看一下接收机的模式了,肯定是遥控器的通道跟输出端口的通道不匹配.参考Futuba T14SG遥控器的说明书,如下图

  5. Qt-网易云音乐界面实现-4 实现推荐列表和我的音乐列表,重要在QListWidget美化

    来标记下这次我么实现的部分 这次我们来是试下这部分功能,来对比一下,左边是原生,右面是我写的,按着模仿的海可以哈,就有有的资源不是一样了,因为我连抠图都懒得扣了了 好了,现在就是我的是先过程了,主要教 ...

  6. Jmeter性能指标分析

    以下是下载了服务器监控插件的各个组件的功能介绍,有助于以后jmeter的性能测试 1.jp@gc - Actiive Threads Over Time:不同时间的活动用户数量展示(图表) 当前的时间 ...

  7. python包管理工具pip

    你可以使用一个名为 pip 的程序来安装.升级和移除软件包.默认情况下 pip 将从 Python Package Index <https://pypi.org> 安装软件包.你可以在浏 ...

  8. 解决java读取大文件内存溢出问题

    1. 传统方式:在内存中读取文件内容 读取文件行的标准方式是在内存中读取,Guava 和Apache Commons IO都提供了如下所示快速读取文件行的方法: Files.readLines(new ...

  9. SICP读书笔记 3.5

    SICP CONCLUSION 让我们举起杯,祝福那些将他们的思想镶嵌在重重括号之间的Lisp程序员 ! 祝我能够突破层层代码,找到住在里计算机的神灵! 目录 1. 构造过程抽象 2. 构造数据抽象 ...

  10. CHAPTER 40 Science in Our Digital Age 第40章 我们数字时代的科学

    CHAPTER 40 Science in Our Digital Age 第40章 我们数字时代的科学 The next time you switch on your computer, you ...