相对定位

如果想为元素设置层模型中的相对定位，需要设置position:relative;，它还是会占用该元素在文档中初始的页面空间，通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

绝对定位

如果想为元素设置层模型中的绝对定位，需要设置position:absolute;，这条语句的作用将元素从文档流中拖出来,将不占用原来元素的空间，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位。如果不存在就逐级向上排查，直到相对于body元素，即相对于浏览器窗口。

HTML+CSS：css定位详解之相对定位、绝对定位和固定定位的更多相关文章

  1. Android开发之位置定位详解与实例解析（GPS定位、Google网络定位，BaiduLBS（SDK）定位）

    在android开发中地图和定位是很多软件不可或缺的内容,这些特色功能也给人们带来了很多方便.定位一般分为三种发方案:即GPS定位.Google网络定位以及基站定位 最简单的手机定位方式当然是通过GP ...

  2. 带你走进CSS定位详解

    学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案. 一:定位 定位属性列表 position top bot ...

  3. CSS进阶内容—浮动和定位详解

    CSS进阶内容-浮动和定位详解 我们在学习了CSS的基本知识和盒子之后,就该了解一下网页的整体构成了 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS的三种布 ...

  4. HTML和CSS高级指南——定位详解

    本文由大漠根据Shay Howe的<An Adavnced Guide to HTML & CSS>第二课<Detailed Positioning>所译,整个译文带有 ...

  5. [转]CSS hack大全&详解

    转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...

  6. [转]CSS vertical-align属性详解 作者：黄映焜

      CSS vertical-align属性详解 posted @ 2014-08-26 17:44 黄映焜   前言:关于vertical-align属性. 实践出真知. 垂直居中. 第二种用法. ...

  7. CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别

    1.代码 (1)示例代码1 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...

  8. css定位:相对定位、绝对定位、固定定位的区别与特性

    css定位:相对定位.绝对定位.固定定位的区别与特性 原文地址:http://www.qingzhouquanzi.com/106.html css定位常用的有以下三种: 使用了定位的共同特性: 这三 ...

  9. HTML+CSS基础知识（5）相对定位、绝对定位、固定定位

    文章目录 1.相对定位 1.1 代码 1.2 测试结果 2.绝对定位 2.1 代码 2.2 测试 3.固定定位 3.1 代码 3.2 测试结果 1.相对定位 1.1 代码 <!DOCTYPE h ...

随机推荐

  1. 【tomcat系列】配置tomcat远程访问

    当程序部署在tomcat上后,需要监测tomcat的性能和监测tomcat的各项指标,如内存使用情况,cpu使用情况,jvm实际情况等,对于这些指标的监控,tomcat提供了访问入口,然而tomcat ...

  2. 判断括号是否有效(c++描述)

    开门见山,假设我们有一大串的由'{', '}', '[', ']', '(', ')' 这些括号构成比如像这样的"{[}][()"符号串,我们肉眼当然能看出它是非法的,那么如何使用 ...

  3. JVM04——七个GC垃圾收集器，一个都不能少

    了解了JVM内存区域与垃圾回收算法,今天将为各位带来关于垃圾收集器的知识.关注我的公众号「Java面典」了解更多 Java 相关知识点. Java 堆内存被划分为新生代和老年代两部分,因此 JVM 通 ...

  4. Ubuntu16.04 desktop 设置共享文件夹 -- 图形界面配置

    1. 安装 安装samba 直接采用 Ubuntu16.04 desktop 里面的安装向导来完成: 选中需要共享的文件夹 -> 右键 “local Network Share” -> 安 ...

  5. let和var在for循环中的不同表现

    var声明变量: var只有函数作用域,没有块级作用域 //函数作用域的表现 function test(){ var i =10; console.log(i); } test(); console ...

  6. Python进阶学习之面向对象

    目录 面向对象 私有属性 面向对象   python也有面向对象的编程,它与C++中的类有点相似.它也只是运算符重载,继承. class Test: num=0 def __init__(self): ...

  7. 浅谈ASP.NET Core中的DI

    DI的一些事 传送门马丁大叔的文章 什么是依赖注入(DI: Dependency Injection)?     依赖注入(DI)是一种面向对象的软件设计模式,主要是帮助开发人员开发出松耦合的应用程序 ...

  8. DS博客作业02--栈和队列

    0.PTA得分截图 1.本周学习总结 1.1总结栈和队列内容 栈的存储结构及操作 栈的顺序存储结构 typedef struct { ElemType data[MaxSize]: int top: ...

  9. Natas10 Writeup（正则表达式、grep命令）

    Natas10: 页面与上一关类似,只是增加了提示“出于安全原因,我们现在过滤某些字符”. 查看源码,发现关键代码如下: $key = ""; if(array_key_exist ...

  10. 聊聊 WebSocket，还有 HTTP

    还记得曾经风靡一时的 QQ 秀聊天室吗?那时,还在上初.高中的我们,QQ 是最常用的聊天交友工具:而 QQ 秀聊天室的出现打破了只能按条件查找好友的局限性,大家可以随意进入聊天室房间,进行在线聊天.怀 ...