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. ajax数据请求4（xml格式）

    ajax数据请求4(xml格式): <!doctype html> <html> <head> <meta charset="utf-8" ...

  2. Mongodb 参数说明及常见错误处理

       在 CentOS7 上安装 MongoDB 1 通过 SecureCRT 连接至 CentOS7 服务器: 2 进入到 /usr/local/ 目录:cd /usr/local 3 在当前目录下 ...

  3. Dagger2在Android开发中的应用

    世界是普遍联系的,任何事物和个体都直接或间接相互依赖,在时空长河中共同发展.在面向对象的世界中,更是如此,类与类之间的依赖,关联关系,模块(亦或是分层架构中的层)之间的耦合关系,都是我们在软件开发实践 ...

  4. seajs源码阅读

    乘着周日有点时间,阅读一下玉伯大神的源码. seajs的源码写得真的很好,很是佩服,工整美观不愧是大神,造福百姓. 说起seajs不得不说,AMD和CMD的区别.  CMD 推崇依赖就近,AMD 推崇 ...

  5. Python爬虫从入门到放弃（十三）之 Scrapy框架的命令行详解

    这篇文章主要是对的scrapy命令行使用的一个介绍 创建爬虫项目 scrapy startproject 项目名例子如下: localhost:spider zhaofan$ scrapy start ...

  6. java基础07 多线程

    在学习操作系统时,我们会学习进程和线程,那么进程和线程又是什么东西呢? 进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动,进程是系统进行资源分配和调度的一个独立单位. 线程(thread) ...

  7. 一个move_uploaded_file()引起的PHP异常与错误的深入理解

    背景:我在公司开发一个产品Excel导入到数据库的功能,写起来挺快的,用phpexcel几下就写好了,本地测试挺顺的,git push上去,项目负责人部署到测试环境,就出现问题了.具体问题一句话不好说 ...

  8. Liunx上传下载和压缩问题分享

    昨天紧急需求需要测试,开发远程发了个包需要部署到生产环境.我通过FileZila连接到服务器,然后把补丁包发送到服务器对应路径,通过CRT操作,进行包的解压.重启. 同时,为了配合开发定位问题,需要从 ...

  9. MongoDB的Windows安装

    一.下载MongoDB安装文件 下载地址:http://pan.baidu.com/s/1nvEuDD3 二.双击下载的文件,根据向导一直到finish.比如安装目录为 d:\mongodb 1.创建 ...

  10. 51nod_1040:最大公约数之和（数论）

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1040 给出一个n,求1-n这n个数,同n的最大公约数的和. ...