相对定位

如果想为元素设置层模型中的相对定位,需要设置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. python之二分法求平方根

    前几天学完python的程序分支结构后,老师课后留了一个问题,用两种方法计算一个大于或等于 1 的实数 n 数的平方根. 描述设计一个用二分法计算一个大于或等于 1 的实数 n 的平方根的函数sqrt ...

  2. Django中ORM中的get与filter区别

    本文出自 “orangleliu笔记本” 博客,出处http://blog.csdn.net/orangleliu/article/details/38597593 Django的orm中get和fi ...

  3. Spring Boot 结合 Redis 序列化配置的一些问题

    前言 最近在学习Spring Boot结合Redis时看了一些网上的教程,发现这些教程要么比较老,要么不知道从哪抄得,运行起来有问题.这里分享一下我最新学到的写法 默认情况下,Spring 为我们提供 ...

  4. C语言 变量初始化二进制、八进制、十六进制

    int a1 = 10;   //十进制 int a2 = 0b10;  //二进制 int a3 = 010;    //八进制 int a4 = 0x10;  //十六进制 打印的结果:

  5. Http报文和Request和Response的常用方法

    简述 它是HTTP应用程序之间发送的数据块.这些数据块以一些文本形式的元信息开头,这些信息描述了报文的内容及含义,后面跟着可选的数据部分.这些报文都是在客户端.服务器和代理之间流动. HTTP报文的流 ...

  6. DOTNET CORE源码分析之IServiceProvider、ServiceProvider、IServiceProviderEngine、ServiceProviderEngine和ServiceProviderEngineScope

    首先谈一下IServiceProvider IServiceProvider只提供给了一个根据类型获取对象的功能,试想一下IOC总得有一个找到对象,具体如下 public interface ISer ...

  7. BUAAOO——UNIT2 SUMMARY

    本单元的题目为设计电梯,通过这单元的学习,我初步了解了关于java多线程编程及线程之间并发安全性设计等方面的内容.以下为对这三次作业的分析与总结. 作业分析 序号 楼层 电梯数量 可停靠楼层 调度策略 ...

  8. Java基础 - 数据类型和运算符

    Java 语言支持的类型分为两类:基本数据类型(Primitive Type)和引用类型(Reference Type). 目录 基本数据类型 数值类型 整数类型 byte short int lon ...

  9. 包和访问权限修饰符,.单例设计模式,.Object类常用方法,.内部类

    1.包和访问权限修饰符 1.1 包 为什么要导包? 将字节码文件(.class)文件进行分类存放 --->包 其实就是文件夹 import java.util.Arrays; 包的划分规则 方案 ...

  10. C语言之歌词解析

    0x00 脚下的路 不知道为啥要写这个小标题,可能是年轻的心想体验一下苍老的感觉,抑或是少年的一阵迷茫.混沌的四年,终究还是入了这一行.从初时的不知,到现在的刚开始,中间的间隔竟是四年之久,想起了陈奕 ...