定位

定位模式: 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 定位模式的更多相关文章

  1. 教你玩转CSS Position(定位)

    CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使 ...

  2. CSS Position 定位属性

    本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...

  3. [CSS]position定位

    CSS position 属性 通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式. position 属性值的含义: static 元素框正常生成.块级元 ...

  4. CSS position(定位)属性

    关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...

  5. CSS| position定位和float浮动

    对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...

  6. css - Position定位属性与层级关系

    今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: <!DOCTYPE html> <html> <he ...

  7. Css Position定位(简易版本)

    准备前的知识: 定位只对块级起作用.如div,p等元素是块级元素,如果是内联元素则可以先变成块级元素,display:block即可. 开始讲解: 定位共四种:static,fixed,relativ ...

  8. CSS Position 定位属性介绍

    1.介绍 1.1 说明 Position 属性:规定元素的定位类型.即元素脱离文档流的布局,在页面的任意位置显示. 1.2 主要的值 ①absolute :绝对定位:脱离文档流的布局,遗留下来的空间由 ...

  9. <转载>DIV+CSS position定位方法总结

    如何学习DIV+CSS布局之position属性 如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用 absolute. 任 ...

随机推荐

  1. BZOJ2877:[NOI2012]魔幻棋盘

    浅谈树状数组与主席树:https://www.cnblogs.com/AKMer/p/9946944.html 题目传送门:https://lydsy.com/JudgeOnline/problem. ...

  2. 如何在kindle 3上无法进入 http://www.google.com/reader, 先登陆www.google.com, 然后选择阅读器。

    如何在kindle 3上无法进入 http://www.google.com/reader,  先登陆www.google.com, 然后选择阅读器.

  3. vijos:P1190繁忙的都市

    描述 城市C是一个非常繁忙的大都市,城市中的道路十分的拥挤,于是市长决定对其中的道路进行改造.城市C的道路是这样分布的:城市中有n个交叉路口,有些交叉路口之间有道路相连,两个交叉路口之间最多有一条道路 ...

  4. The Tomcat server configuration at \Servers\Tomcat v8.0 Server at localhost-config is missing. Check the server for erro

    解决方案 1.选择Eclipse工具栏中的Windows→Perferences 2.remove已经创建的server 3.选择Add重新添加,选择create anew local server ...

  5. Rsync的配置与使用

    一.介绍 (不想看直接可以跳过) Rsync是一个远程数据同步工具,可通过LAN/WAN快速同步多台主机间的文件.Rsync本来是用以取代rcp的一个工具,它当前由 rsync.samba.org维护 ...

  6. 如何用python最快的获取大文件的最后几行

    工作中经常会遇到处理日志文件的问题:为了得到日志的最新状态,我们需要获取日志文件的最后部分行来做判断.那么,这种情况下我们应该怎么做呢? 1)常规方法:从前往后依次读取 步骤:open打开日志文件. ...

  7. js能否实现截图,截图之后的图片数据再下载到本地?

    https://www.zhihu.com/question/20763177 http://www.cnblogs.com/yanweidie/p/5203943.html

  8. Collection与Map总结

    顺序表和链表统称为线性表:顺序表一般表现为数组,如:ArrayList的实现;链表有单链表.双链表.循环链表的区分,如:LinkedArrayList由双链表+哈希表实现

  9. iView之select获取value和label

    使用:label-in-value="true" @on-change="obtainValue" 详见官方文档:https://www.iviewui.com ...

  10. centos6.5下PF_RING安装方法

    参考的是这个大牛的文章:http://blog.csdn.net/fan_hai_ping/article/details/6705170 系统环境:centos6.5 开发版 PF_RING版本:P ...