Static 定位

HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到top, bottom, left, right影响。

相对定位Relative
相对定位元素的定位是相对其正常位置。
相对定位三要素：
占位：保留
参考坐标轴原点：以自身为准，横向/纵向偏移
z值：非0整数 如：-1， -2 ，-3 ， 1 ，2 ，3等
【注意】位置移动以自己原先的位置为准

绝对定位Absolute
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
绝对定位三要素：
不占位
坐标原点参考父对象
z值：非0整数 如：-1， -2 ，-3 ， 1 ，2 ，3等
【注意】位置移动以父元素为准
绝对定位的元素不留占位
会被后来的元素替代
这意味着什么？
兄弟元素不再互相推挤了，他们的位置不会发生联系

父相对，子绝对，子随父移动（记住这话就行了）
绝对/相对配合排版
子随父

固定定位Fixed
与绝对定位非常接近
唯一的不同是固定定位相对的是body
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：

css 定位功能position的更多相关文章

  1. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

  2. css定位、position与float同时使用的情况

    一.css定位 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 1.普通流:未专门指定的元素都在普通流中定位,position:static/relative;和float:none;也在普通 ...

  3. css定位 与position

    本文同时发表于本人个人网站 www.yaoxiaowen.com 在正式讨论position之前,我们需要知道几个概念. 块元素:独占一行的元素.比如div,h1~h6,p等,它是自带换行的. 内联元 ...

  4. CSS定位之position详解(转载)

    本文转载于xingoo的博文:http://www.cnblogs.com/xing901022/p/5193751.html  position属性 在前端中,position是很常见的属性.通过这 ...

  5. css 定位属性position的使用方法实例-----一个层叠窗口

    运行结果: <!DOCTYPE html> <html> <head> <title>重叠样式窗口</title> <style ty ...

  6. 关于CSS定位属性 position 的使用

    CSS中一般通过浮动和定位来对标签进行位置操作.下面我们来讨论一下定位的用法和需要注意的地方. 1.首先,说一下position的几个属性值 (1)none属性值,这个是定义不进行定位,默认为不定位, ...

  7. CSS定位之position详解

    position属性 在前端中,position是很常见的属性.通过这个属性可以调整dom元素在浏览器中显示的位置. 它有几个常用的属性: static 默认值.通常是在覆盖absolute或者rel ...

  8. CSS定位属性position相关介绍

    position属性用来定义元素的定位方式. 定位相关属性值 1.static 默认值 2.absolute 绝对定位 3.fixed 固定定位 4.relative 相对定位 5.sticky 粘性 ...

  9. CSS - 定位属性position使用详解（static、relative、fixed、absolute）

    position 属性介绍 (1)position 属性自 CSS2 起就有了,该属性规定元素的定位类型.所有主流浏览器都支持 position 属性. (2)position 的可选值有四个:sta ...

随机推荐

  1. python实现折半查找算法&&归并排序算法

    今天依旧是学算法,前几天在搞bbs项目,界面也很丑,评论功能好像也有BUG.现在不搞了,得学下算法和数据结构,笔试过不了,连面试的机会都没有…… 今天学了折半查找算法,折半查找是蛮简单的,但是归并排序 ...

  2. CSS 基础

    CSS Cascading Style Sheet 层叠样式表 Css创建: 1.外部样式表(样式表应该以 .css 扩展名进行保存) <head> <link rel=" ...

  3. WPF:动态显示或隐藏Listview的某一列

    这几天做项目,需要做个listview满足能够动态显示或隐藏某些列,由于自己是菜鸟水平,查了两天资料也没有想出解决办法.就在我山穷水尽的时候看到了Mgen的一篇博客,给了我很大启发,所以我也决定把自己 ...

  4. usaco training 4.1.2 Fence Rails 题解

    Fence Rails题解 Burch, Kolstad, and Schrijvers Farmer John is trying to erect a fence around part of h ...

  5. vijos1010题解

    题目: 话说乾隆带着他的宰相刘罗锅和你出巡江南,被杭州城府邀请去听戏,至于什么戏,那就不知了.乾隆很高兴,撒酒与君臣共享.三更欲回住处,可是乾隆这人挺怪,他首先要到西湖边散散步,而且命令不准有人跟着他 ...

  6. Java自学手记——集合

  7. 基于springmvc的hessian调用原理浅析

    一.客户端 1.构造(初始化) 由客户端的配置文件随容器的启动而进行初始化,配置文件如下: <?xml version="1.0" encoding="UTF-8& ...

  8. React 实践项目 （三）

    React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架.而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战! 上回说到使用Redux进行 ...

  9. Luogu T7152 细胞（递推，矩阵乘法，快速幂）

    Luogu T7152 细胞(递推,矩阵乘法,快速幂) Description 小 X 在上完生物课后对细胞的分裂产生了浓厚的兴趣.于是他决定做实验并 观察细胞分裂的规律. 他选取了一种特别的细胞,每 ...

  10. Java后端开发书架

    本人摘录于江南白衣文章,文章地址:http://calvin1978.blogcn.com/articles/javabookshelf.html 书架主要针对Java后端开发. 3.0版把一些后来买 ...