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. 【LeetCode】191. Number of 1 Bits

    题目: Write a function that takes an unsigned integer and returns the number of ’1' bits it has (also ...

  2. cssradius

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. 怎么使用CURL传输工具发送get或者post指令

    1.先下载CURL,见网盘 2.使用,可以直接到doc,cd到curl.exe目录,然后执行 或者用脚本 Set exeRs = WshShell.Exec("curl.exe -F &qu ...

  4. Gradle学习笔记之Groovy

    [TOC] Gradle 的核心功能是由Java实现. 在这些功能之上, 有一个使用动态编程语言Groovy编写的领域特定语言(DSL). Gradle的构建脚本build.gradle和settin ...

  5. App Extensions篇之Share Extension

    转载请注明出处:http://www.cnblogs.com/zhanggui/p/7119572.html 1.前言 这里主要是对App Extension的一些介绍以及详细给大家介绍一下Share ...

  6. 《物联网框架ServerSuperIO教程》-22.Web端对传感器实时监测与控制。附：v3.6.8版本，支持WebSocket

    1.ServerSuperIO v3.6.8更新内容 1.1 增加WebSocket服务端功能,支持自控模式.并发模式.单例模式,不支持轮询模式1.2 接收数据缓存与现有的IO实例分离.1.3 优化代 ...

  7. 使用Cain&Abel进行网络嗅探

    启动Cain&Abel并切换到"sniffer(嗅探)"标签. 第一步:需要对Cain&Abel进行配置,先单击最上面的"Configure(配置)&qu ...

  8. Angular基础（一）

    AngularJS有五个主要核心特性,如下介绍: 双向数据绑定 -- 实现了把model与view完全绑定在一起,model变化,view也变化,反之亦然. 模板 -- 在AngularJS中,模板相 ...

  9. JavaWeb 后端 <一> 之 Tomcat服务器 - Http协议 学习笔记

    1.Web开发概述 1.1服务器上的资源分类: a.静态资源:指web页面中供人们浏览的数据始终是不变.html css js 图片 多媒体 b.动态资源:指web页面中供人们浏览的数据是由程序产生的 ...

  10. 面向对象JavaScript的基本概念

    一.类和对象 1, JavaScript对象分为三类:本地对象,内置对象,宿主对象. 本地对象有15种:Object Function Array String Number Boolean Date ...