一、相对定位(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. WebForm - 文本框回车事件

    document.getElementById("Pwd").onkeyup = function (e) { ) { fun_Login(); } };

  2. vue教程3-06 vue路由嵌套(多层路由),路由其他信息

    多层嵌套: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. 利用Warensoft Stock Service编写高频交易软件--DEMO

    利用Warensoft Stock Service编写高频交易软件 无论是哪种交易软件,对于程序员来讲,最麻烦的就是去实现各种算法.本文以SAR算法的实现过程为例,为大家说明如何使用Warensoft ...

  4. 解决 在 WINDOWS 下 同时安装 python2 python3 后 pip 错误

    再之前同时安装 python 后 只需把环境变量PATH 里面改为 PATH=C:\Python36-32\Scripts\;C:\Python36-32\;C:\Python27\;C:\Pytho ...

  5. 【原创】SQL Server 性能调优读书笔记

    CPU 100%: 有时可能是硬盘性能不足,或者内存容量不够,让CPU一直忙于I/O. 导致性能问题的一些因素: 用户习惯:在运行尖峰时刻做一些不必做但消耗资源的事情,如之行数据库完整备份,如在服务器 ...

  6. 九浅一深ThreadLocal

    ThreadLocal的作用.使用示例 ThreadLocal是线程的本地存储,存储在其内的值只能被当前线程访问到,其他线程获取不到,可以存储任意对象.经常用来存储当前线程的一些上下文信息,这样不用通 ...

  7. chromium浏览器开发系列第三篇:chromium源码目录结构

    上两篇介绍了下载源码和编译源码,这次主要介绍chromium的源码目录结构,我也是通过源码和官网结合来跟大家说,如果有说的不准确的,欢迎交流. 另外,官网的不一定准确,他们其实也很懒,所以最主要还是靠 ...

  8. vue导出excel数据表格功能

    前端工作量最多的就是需求,需求就是一直在变,比如当前端数据写完之后,需要用Excel把数据下载出来. 第一步安装依赖包,需要把代码下载你的项目当中 cnpm install  file-saver c ...

  9. Jenkins持久化集成使用

    1.概述 Jenkins是基于Java开发的一种持续集成工具,用于监控持续重复的工作,功能包括: 持续的软件版本发布/测试项目 监控外部调用执行的工作 2.搭建 2.1环境准备 首先我们要准备搭建的环 ...

  10. logstash-1-安装配置

    centos logstash logstash logstash是什么呢, 他是一个数据管道, JRuby编写的运行在java虚拟机的具有收集, 分析和转发数据流功能的工具 特性: 安装 1), w ...