css position 定位模式
定位
定位模式: static relative absolute fixed
边偏移 :top bottom left right
一般的定位必须要有定位模式以及边偏移
static 静态定位 默认的定位模式 没有边偏移
取消定位 跟浮动的float:none是一样的 取消浮动
position:relative 相对于原来的位置 原来的位置是有占位的 有边偏移 没有脱离标准流的
top :距离原来的顶部多少个px
left:距离原来的左边位置...个px
绝对定位 不占有原来的位置 脱离标准流
如果父亲没有定位 我们相当于找的是可视区域 client
如果父盒子有定位,找的是父盒子(相对于父盒子的定位)
子绝父相:
1.父盒子由于需要占用位置应该使用相对定位(没有脱离标准流)
2.子盒子由于要显示层级效果应该使用绝对定位(已经脱离标准流)
子盒子在父盒子居中显示
1.父盒子和子盒子都有定位
2.给子元素 left:50%;top:50%;
3.给父元素的margin-top:-子元素高度的50%(比如子元素100px高度,就给-50px)
-子元素宽度的50%(比如子元素100px宽度,就给-50px)
resize:none 这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域 textare
css position 定位模式的更多相关文章
- 教你玩转CSS Position(定位)
CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使 ...
- CSS Position 定位属性
本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...
- [CSS]position定位
CSS position 属性 通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式. position 属性值的含义: static 元素框正常生成.块级元 ...
- CSS position(定位)属性
关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...
- CSS| position定位和float浮动
对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...
- css - Position定位属性与层级关系
今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: <!DOCTYPE html> <html> <he ...
- Css Position定位(简易版本)
准备前的知识: 定位只对块级起作用.如div,p等元素是块级元素,如果是内联元素则可以先变成块级元素,display:block即可. 开始讲解: 定位共四种:static,fixed,relativ ...
- CSS Position 定位属性介绍
1.介绍 1.1 说明 Position 属性:规定元素的定位类型.即元素脱离文档流的布局,在页面的任意位置显示. 1.2 主要的值 ①absolute :绝对定位:脱离文档流的布局,遗留下来的空间由 ...
- <转载>DIV+CSS position定位方法总结
如何学习DIV+CSS布局之position属性 如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用 absolute. 任 ...
随机推荐
- 【转】Pro Android学习笔记(九):了解Content Provider(下下)
Content provider作为信息的读出,比较常见的还有文件的读写,最基础的就是二进制文件的的读写,例如img文件,音频文件的读写.在数据库中存放了该文件的路径,我们可以通过ContentPro ...
- 杂项-QRCode:ZXing
ylbtech-杂项-QRCode:ZXing 1.返回顶部 1. ZXing是一个开放源码的,用Java实现的多种格式的1D/2D条码图像处理库,它包含了联系到其他语言的端口.Zxing可以实现使用 ...
- ACM之Java技巧
一.Java之ACM注意点 关于四舍五入 小数保留几位: DecimalFormat df = new DecimalFormat("0.00"); String num = d ...
- HTTP缓存控制
HTTP缓存控制总结 引言 通过网络获取内容既缓慢,成本又高.大的相应需要在客户端和服务器之间多次往返通信,这拖延了浏览器可以使用和处理内容的时间,同时也增加了通信的成本.因此,缓存和重用以前获取 ...
- git pull 冲突
1. 问题描述 error: Your local changes to the following files would be overwritten by merge: xxx/xxx/xxx ...
- JAVA类型信息——Class对象(转载)
JAVA类型信息--Class对象 一.RTTI概要 1.类型信息RTTI :即对象和类的信息,例如类的名字.继承的基类.实现的接口等. 2.类型信息的作用:程序员可以在程序运行时发现和使用类型信息. ...
- JAVA之BigInteger(转)【转】【很好用啊】
用Java来处理高精度问题,相信对很多ACMer来说都是一件很happy的事,简单易懂.用Java刷了一些题,感觉Java还不错,在处理高精度和进制转换中,调用库函数的来处理.下面是写的一些Java中 ...
- 【网络爬虫】【python】网络爬虫(五):scrapy爬虫初探——爬取网页及选择器
在上一篇文章的末尾,我们创建了一个scrapy框架的爬虫项目test,现在来运行下一个简单的爬虫,看看scrapy爬取的过程是怎样的. 一.爬虫类编写(spider.py) from scrapy.s ...
- UVa 11100 The Trip, 2007 (题意+贪心)
题意:有n个包,其中小包可以装到大的包里,包的大小用数字进行表示,求最小的装包数量. 析:这个题的题意不太好理解,主要是有一句话难懂,意思是让每个最大包里的小包数量的最大值尽量小,所以我们就不能随便输 ...
- hdu 5033 buiding(单调栈)
hdu 5033 buiding(单调栈) 某年某月某天,马特去了一个小镇.这个小镇如此狭窄,以至于他可以把小镇当作一个枢纽.在镇上有一些摩天大楼,其中一栋位于xi,高度为hi.所有的摩天大楼位于不同 ...