• static: HTML元素的默认定位方式
  • absolute: 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
  • relative: 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
  • fixed: 元素的位置相对于浏览器窗口是固定位置, 即使窗口是滚动的它也不会移动

记住如下的口诀

  • 绝对定位（absolute）位置是相对最近已经定位的父元素，如果父元素本身没有使用position定位，则相对于文档（html）定位
  • 绝对定位使用通常是父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位

在绝对定位时候我们可以使用css z-index定义css层重叠顺序。同时left、right、bottom、top的数

CSS中position的absolute和relative用法的更多相关文章

  1. 怕忘记了CSS中position的absolute和relative用法

    CSS2.0中的定位确实有时会把人弄糊涂,所以今天给它记下来,同时供以后查阅.下面写的内容有一部分借鉴了w3cschool和divcss5这两个官方网站,在此处特别的说明一下 CSS2.0中posit ...

  2. css中position属性(absolute|relative|static|fixed)概述及应用

    position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...

  3. 【转】CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  4. CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  5. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  6. CSS中"position:relative"属性与文档流的关系

    前言 近期遇到一个问题--"position:relative"到底会不会导致元素脱离文档流?主流观点是不会,但都给不出一个有说服力的论据.最后我自己佐证了一番,总算有了个结果:& ...

  7. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  8. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  9. CSS中position和header和overflow和background

    <!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...

随机推荐

  1. c# 继承小结

    本文意在巩固基础知识,并不是对其进行深入剖析,如若对各位高手没有什么作用,请绕过.本文为原创文,所有示例均是博主测试过的,欢迎大家批评指正,如有转载请标明出处,谢谢.继承.封装和多态是面向对象编程的重 ...

  2. matlab对点云旋转平移

    1.显示茶壶点云 ptCloud = pcread('teapot.ply');figure(1)pcshow(ptCloud); title('Teapot'); 2.Create a transf ...

  3. centos虚拟机启用网卡

    CentOS虚拟机安装成功后,默认开机未启用网关,通过修改配置文件,启用网卡 编辑系统配置文件,虚拟机完成后,系统安装了一个默认的网卡,即eth0,其配置文件的路径为/etc/sysconfig/ne ...

  4. ADO-添加msado15.dll及基本类对象的了解

    一.dll文件的导入 参考文献:https://blog.csdn.net/qq_31209383/article/details/51199762 要使用数据库,首先在stdafx.h中导入msad ...

  5. 关于MFC的DLL调用方法问题

    参考资料: 一.dll导出方式: MFC的DLL函数导出方法有两种:一种是通过模块定义文件DEF文件:另一种是在导出函数前加_declspec(dllexport). 1.def文件方法: 只需要在E ...

  6. OpenCV——饱和度调整

    参考: 闲人阿发伯的博客 // define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED ...

  7. CCSpriteBatchNode CCSpriteFrameCache

    3.27 精灵集合类(CCSpriteBatchNode) //以纹理来创建一个精灵集合对象 static CCSpriteBatchNode* createWithTexture(CCTexture ...

  8. freeMarker（八）——程序开发指南之配置（Configuration）

    学习笔记,选自freeMarker中文文档,译自 Email: ddekany at users.sourceforge.net 1.基本内容 配置(configuration)就是 freemark ...

  9. .net Core 2.1 MVC+EF+Redis搭建

    官方学习资料 搭建空MVC框架 1.创建一个空模板 2.创建文件夹 Controllers.Models.Views 3.在Controllers文件夹下创建HomeController.cs 选择C ...

  10. 开启现有android项目

    开启工程 在屏幕上方的选单列上,选择「File->New->Project」, 会弹出「New Project」对话视窗.Eclipse 是通用的编辑环境,可根据你所安装的不同扩充套件而支 ...