css定位讲解
定位分三种:相对定位,绝对定位,固定定位;
相对定位:position:relatve;
绝对定位:position:absolute;
固定定位:position:fixed;
一,相对定位
1,相对定位:
1)相对定位就是微调元素的位置,让元素相对自己的原来位置,进行位置调整;
2)不脱标,实际上还是原来的位置;
2,相对定位的用途:
相对定位有坑,所以一般不用于做“压盖”效果。页面中,效果极小。就两个作用:
1)微调元素;
2)做绝对定位的参考,(子绝父相);
二,绝对定位1,脱离文档流:
绝对定位后,标签就不会区分行内元素与块级元素,不用display转换就可以改变高宽;
2, 1)绝对定位参考点是页面的左上角,而不是浏览器的左上角; top定位;
2)用bottom定位就是浏览器首屏窗口尺寸,对应的左下角;
3,以盒子为参考点
一个绝对定位的元素,如果父辈元素中出现了也定位的元素,那么将以父辈这个元素为参考点;
注意:1)不一定是相对定位,任何定位,都可以作为参考点;
2)绝对定位的儿子,无视参考的那个盒子的padding,找border的内侧为参考点;"子绝父相"才有意义,父亲不脱标,儿子脱标在父亲的范围里面移动;
4,绝对定位的盒子居中:
margin:0 auto;失效
解决方法:
left:50%;
margin-left:负的宽度一半;
下面有个小问题不错:
三,固定定位
固定定位就是相对浏览器窗口定位,页面如何滚动,这个盒子的显示位置不变;
position:fixed;
四,z-index
1,z-index值表示谁压着谁大,数值大的压盖住数值小的;
2,前提是有定位了的元素,才能有z-index值,不管相对,固定,绝对定位都可以使用z-index,而浮动不能用;
3,z-index值没有单位,就是一个正整数。默认的z-index值是0。
4,如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面能压住别人。定位了的元素,永远能够压住没有定位的元素。
5, 从父现象:父亲怂了,儿子再牛也没用。
css定位讲解的更多相关文章
- CSS 定位
一.CSS 定位和浮动 它们代替了多年来的表格布局. 定位的思想很简单,相对于正常位置.相对于父元素.另一个元素甚至是浏览器窗口的位置. 浮动在 CSS1 中被首次提出.浮动不完全是定位, ...
- CSS定位:几种类型的position定位的元素
当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来 ...
- CSS学习总结3:CSS定位
CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 一.普通流 除非专门指定,否则所有框都在普通流中定位.普通流中元素框的位置由元素在(X)HTML中的位置决定.块级元素从上到下 ...
- web前端css定位position和浮动float
最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框 ...
- CSS 定位 (Positioning)
CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多 ...
- css定位
文档流 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版 ...
- 常用的CSS定位,XPath定位和JPath定位
CSS定位 举例 描述 div#menu id为menu的div元素 div.action-btn.ok-btn class为action-btn和ok-btn的div元素 table#emailLi ...
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析
加速IE浏览器自动化执行效率:Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析 1.技术背景 在Web应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...
随机推荐
- JavaScript设计模式接口
JavaScript中实现接口的方法有三种: 第一种,使用注释的方法实现接口 特点:(1)最简单,但是功能最弱(2)利用 interface和 implement"文字"(3)把他 ...
- 如何用Django从零开始搭建一个网站(0)
python,django等安装就直接略过了.下面直接奔如主题,搭建网站. Step1:新建一个django project,运行命令:‘django-admin startproject myPit ...
- ubuntu中运行python脚本
1. 运行方式一 新建test.py文件: touch test.py 然后vim test.py打开并编辑: print 'Hello World' 打开终端,输入命令: python test.p ...
- Color Blender---在线渐变色带生成器
Color Blender是一个很有用的在线渐变色带生成器,它可以在两种颜色之间,自动生成过渡色,对网页设计师来说是一个不错的颜色调配工具. Color Blender的使用方法很简单,你只 ...
- C#仪器数据文件解析-Excel文件(xls、xlsx)
不少仪器工作站可以将数据导出为Excel文件,包括97-2003版本的xls文件和2007+的xlsx文件. 采集Excel文件相比采集pdf文件更容易.程序更健壮,毕竟Excel中数据有明确的行.列 ...
- [js高手之路]封装运动框架实战左右与上下滑动的焦点轮播图
在这篇文章[js高手之路]打造通用的匀速运动框架中,封装了一个匀速运动框架,我们在这个框架的基础之上,加上缓冲运动效果,然后用运动框架来做幻灯片(上下,左右),效果如下: 1 2 3 4 5 // 0 ...
- canvas图表详解系列(3):动态饼状图(原生Js仿echarts饼状图)
本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...
- CSS3动画 transition和animation的用法和区别
transition和animation都是CSS3新增的特性,使用时需要加内核 浏览器 内核名称 W3C IE -ms- Chrome/Safari -webkit- Firefoc - ...
- shell编程/字库裁剪(3)——验证
版权申明:本文为博主窗户(Colin Cai)原创,欢迎转帖.如要转贴,必须注明原文网址 http://www.cnblogs.com/Colin-Cai/p/7712496.html 作者:窗户 Q ...
- python第二课
本节内容 1.列表list.切片 2.字典dict