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. 如何使用apktool反编译，查看androidmanifest的内容

    1.下载apktool http://pan.baidu.com/s/1o7Jy090 2.使用方法

  2. SVN仓库迁移到Git遇到的两个问题和解决办法

    OS: CentOS 7.0 准备: git svn git-svn sudo yum install git sudo yum install subversion sudo yum install ...

  3. js的DOM操作

    ID选择器:document.getElementById("").innerHTML="" class选择器:var divc= document.getEl ...

  4. Button动态样式取代xml

    还在为 textview以及button 的各种样式而烦恼的童鞋们请往这里看~~~~ 一次性解决 textview以及button的样式,再也不用写xml了!!! 全部动态预设置,拒绝堆代码,拒绝xm ...

  5. Java读取property配置文件

    读取配置文件已经成了Java程序员工作的一项必备技能. 配置文件的优点: 可维护性好 怎么个可维护性好呢? 它会让程序中变化的地方很灵活的配置,不需要修改代码. Java程序部署到服务器上去之后就变成 ...

  6. 【tyvj1463】智商问题 [分块][二分查找]

    Background 各种数据结构帝~各种小姊妹帝~各种一遍AC帝~ 来吧! Description 某个同学又有很多小姊妹了他喜欢聪明的小姊妹 所以经常用神奇的函数来估算小姊妹的智商他得出了自己所有 ...

  7. Java 9 揭秘（16. 虚拟机栈遍历）

    Tips 做一个终身学习的人. 在本章中,主要介绍以下内容: 什么是虚拟机栈(JVM Stack)和栈帧(Stack Frame) 如何在JDK 9之前遍历一个线程的栈 在JDK 9中如何使用Stac ...

  8. 关于frameset的一些小总结

    如果我们在一个页面需要由多个子页面一同组成,那么我们可以通过frameset标签来嵌套别的页面 例如 这样的页面布局的思路是: 1,先将页面分为上下两部分也就是 A B 2,再将B部分分为左右两部分 ...

  9. UVA - 1639 -Candy

    题目链接:https://vjudge.net/problem/UVA-1639 题目大意: 有两个糖果盒,每个盒子里面有n个糖果,每天随机选一个(概率分别为p,1-p),然后吃一颗糖.直到有一天,打 ...

  10. 浅谈lvs和nginx的一些优点和缺点

    借鉴一些网上资料整理了简单的比较: LVS的负载能力强,因为其工作方式逻辑非常简单,仅进行请求分发,而且工作在网络的第4层,没有流量,所以其效率不需要有过多的忧虑. LVS基本能支持所有应用,因为工作 ...