定位

定位模式: 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. mac下配置xampp的vhost

    1 先确定在httpd.conf文件(/Applications/XAMPP/xamppfiles/etc/httpd.conf)中,引入了vhosts.conf文件. 1.1 在httpd.conf ...

  2. kkkk

    monkey -p com.alfl.www  -v -v -v  --throttle 50 --pct-touch 30 --pct-motion 15 --pct-nav 15 --pct-ma ...

  3. Spring读取加密属性文件处理--待整理

    引言:Spring框架俨然已经是目前Java WEB项目开发的一个宠儿,更有人将Spring, Struts,和Hibernage称之为Java WEB项目开发的3件利器.Spring的依赖.注入.A ...

  4. cassandra迁移表数据

    cassandra的迁移表数据有2种方式,以keyspace名为mydb,table名为user为例子: 方法一:copy命令. 这种方式适合数据量较小的情况. 1.进入cqlsh,输入命令:COPY ...

  5. docker 学习(一)什么是Docker

    项目中用到docker,就学习一下.第一篇是介绍. Sandboxie(沙箱):一个虚拟系统程序,允许你在沙盘环境中运行浏览器或其他程序,因此运行所产生的变化可以随后删除.它创造了一个类似沙盒的独立作 ...

  6. VS2008 查找失效怎么办

    按Ctrl+F没有反应?   visual studio 里 查找替换 显示不出来;   还能用 让他查找个不存在的文本还会弹出找不到的提示; 就是看不到 查找替换的操作框了;   问题解决方法:   ...

  7. stm32之通信

    本文提到的内容有以下几个方面: 通信概述 串口通信 I2C通信 CAN通信 SPI通信 I2S通信 USB通信 其他通信 一.通信概述 按照数据传送方式分: 串行通信(一条数据线.适合远距离传输.控制 ...

  8. HDU - 2689 Sort it与2016蓝桥杯B 交换瓶子 排序(相邻交换与任意交换)

    Sort it You want to processe a sequence of n distinct integers by swapping two adjacent sequence ele ...

  9. 在Visual Studio中编译Linux的一些问题

    相对路径: 在windows下,和当前文件同一个目录下的引用会这么写: #include "SubDirectory\header.h" 或者 #include "Sub ...

  10. solidity 学习笔记(3) 函数修饰符/继承

    修饰符: 函数修饰符有 constant  view pure 其中 constant和view的功能是一样的  不会消耗gas 也就是说不会做任何存储   constant在5.0以后的版本中被废弃 ...