一、相对定位(position:relative)

  如果想让一个元素在本来的位置进行一个位移,可以将该元素的定位设置为relative,同时指定相对位移(利用top,bottom,left,right).需要注意的是,元素仍然在文档流中,占据着它本来的位置空间.

二、绝对定位(position:absolute)

  想让一个元素在文档中的指定位置,可以使用absolute来定位,将该元素的position设置为absolute,同时使用top,bottom,left,right来定位.绝对定位的元素位置是相对于距离它最近的那个已定位的父级(相对/绝对)元素决定的.如果没有父级元素,则根据body来进行定位,与相对定位相反,绝对定位不占据空间,从文档流中删除.

三、固定定位(position:fixed)

  固定定位使用fixed属性,它会相对于整个文档定位,我们可以轻松的让一个元素定位在浏览器的左上,右上等方位.比如说想让一个div固定在右上方,使用以下代码

  .odiv{ position:fixed;  top:2%;  right:2%;}

  

CSS中的三种常用定位的更多相关文章

  1. css中的大小、定位、轮廓相关属性

    css中的大小.定位.轮廓相关属性 1.通过height.width属性控制组件大小 height:高度,可以设置任何有效的距离值: width:宽度,可以设置任何有效的属性值: max-height ...

  2. CSS中的浮动和定位

    在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设 ...

  3. css中的position(定位)

    一.position语法与结构 position语法: position : static absolute relative position参数:static : 无特殊定位,对象遵循HTML定位 ...

  4. 打开input输入的时候,css中position:absolute/fixed定位的时候,定位元素上移问题解决

    1.异常代码 <style> .box{ min-height: 100vh; width: 100%; position: relative; } .position{ position ...

  5. css中的浮动与定位

    传送门:https://www.cnblogs.com/junwuyao/p/7435257.html

  6. CSS中背景图片定位方法

    转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...

  7. CSS中的定位与浮动

    CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...

  8. (转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

    http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中 ...

  9. HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

    CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...

随机推荐

  1. 原子操作--sync/atomic的用法

    golang 通过sync/atomic库来支持cpu和操作系统级别的原子操作.但是对要操作类型有如下要求 int32, int64,uint32, uint64,uintptr,unsafe包中的P ...

  2. 手推SVM

    推不动了,改日再更!

  3. POJ 2603

    #include<iostream> #include<stdio.h> #define M 350000 #define N 30000 using namespace st ...

  4. 如何在Ubuntu 14.04上利用jexus搭建支持php+mysql数据库的网站服务

      准备部分:sudo apt-get update          sudo apt-get install unzip -y第一部分:安装jexus    在终端运行以下命令    cd /tm ...

  5. 插入排序的Java代码实现

    插入排序也是一类非常常见的排序方法,它主要包含直接插入排序,Shell排序和折半插入排序等几种常见的排序方法. 1.直接插入排序 直接插入排序的思路非常简单:依次将待排序的数据元素按其关键字值的大小插 ...

  6. C# 多线程七之Parallel

    1.简介 关于Parallel不想说太多,因为它是Task的语法糖,至少我是这么理解的,官方文档也是这么说的,它本身就是基本Task的.假设我们有一个集合,不管是什么集合,我们要遍历它,首先想到的是F ...

  7. 【转】获取到元素的 offsetLeft 、offsetTop属性不正常的解决方法。

    原地址:http://hi.baidu.com/huidust520/item/85da006981a6c635ad3e834e 我在工作中遇到个问题: 在ie7下和360浏览器下获取到的  offs ...

  8. 深入理解.sync修饰符

    原文地址:http://www.geeee.top/2019/04/17/vue-sync/ 转载请注明出处 .sync修饰符 一个组件上只能定义一个v-model,如果其他prop也要实现双向绑定的 ...

  9. Java 8 新特性-菜鸟教程 (3) -Java 8 函数式接口

    Java 8 函数式接口 函数式接口(Functional Interface)就是一个有且仅有一个抽象方法,但是可以有多个非抽象方法的接口. 函数式接口可以被隐式转换为lambda表达式. 函数式接 ...

  10. UIKit 框架之UIView二

    下面这些都是UIView一些基本的东西,具体的可以参考UIKit 框架之UIView一博客 一.自定义一个View // // MyView.m // UIView // // Created by ...