定位

定位模式: 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. AGC600 C Rabbit Exercise —— 置换

    题目:https://agc006.contest.atcoder.jp/tasks/agc006_c 考虑 \( i \) 号兔子移动后位置的期望,是 \( x_{i+1} + x_{i-1} - ...

  2. java项目文件的路径问题

    title: 项目下的路径问题 tags: grammar_cjkRuby: true --- 在javaee的项目中,存取文件,解析xml和properties文件,以及项目中的文件,都需要获取路径 ...

  3. makefile 使用【转载】

    该篇文章为转载,是对原作者系列文章的总汇加上标注. 支持原创,请移步陈浩大神博客: http://blog.csdn.net/haoel/article/details/2886 makefile很重 ...

  4. 正则表达式&nbsp;LINUX

    正则表达式 热身 正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串.将匹配的子串做替换或者从某个串中取出符合某个条件的子串等. 例如 g ...

  5. JavaScript代码放在HTML代码不同位置的差别

    通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代码放置在 HTML 文档的任何地方.但放置的地方,会对 JavaScript 代码的正常执行会有一 ...

  6. java多线程系列:Executors框架

    目录 Executor接口介绍 ExecutorService常用接口介绍 创建线程池的一些方法介绍 3.1 newFixedThreadPool方法 3.2 newCachedThreadPool方 ...

  7. 最优化理论-Simplex线性规划

     Sorry,各位,现在这里面啥也没,之所以开这篇文章,是防止以后用得到:现在研究这些,总感觉有些不合适,本人还不到那个层次:如果之后有机会继续研究simplex-线性规划问题,再回来参考下面的链接进 ...

  8. SLAM的现在与未来

    http://geek.csdn.net/news/detail/202128 作者:高翔,张涛,刘毅,颜沁睿. 编者按:本文节选自图书<视觉SLAM十四讲:从理论到实践>,系统介绍了视觉 ...

  9. 51nod1205(johnson)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1205 题意:中文题诶- 思路:johnson模板题 流水作业调 ...

  10. 洛谷P2018 消息传递

    P2018 消息传递 题目描述 巴蜀国的社会等级森严,除了国王之外,每个人均有且只有一个直接上级,当然国王没有上级.如果A是B的上级,B是C的上级,那么A就是C的上级.绝对不会出现这样的关系:A是B的 ...