html-定位
概述：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
/*
position 定位
static 静态定位（没有定位），默认
relative 相对定位，相对于正常位置(原来没定位之前的位置)进行定位，还要占据位置
absolute 绝对定位，没有占据位置，使元素完全脱离文档流
没有定位父级，则相对于整个文档发生偏移
参考最近非static定位的父级进行定位
fixed 固定定位，相对于浏览器窗口进行定位
方向词
left
right
top
bottom
z-index 规定定位的层级（默认0）
值：number 值越大层级越高 */
div{
width: 100px;
height: 100px;
background: aqua;
/*margin: 50px auto;*/
}
.box1{
position: relative;
top: 20px;
background: aquamarine;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
绝对定位：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 100px;
background: aqua;
position: absolute;
top: 100px;
left: 50px;
}
.box2{
width: 200px;
height: 200px;
background: antiquewhite;
margin: auto;
position: relative;
}
#box{
width: 500px;
height: 500px;
background: black;
margin: 50px auto;
position: relative;
}
</style>
</head>
<body>
<div id="box">
<div class="box2">
<div class="box1"></div>
</div>
</div>
</body>
</html>
html-定位的更多相关文章
- Fis3的前端工程化之路[三大特性篇之资源定位]
Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...
- iPhone Anywehre虚拟定位提示“后台服务未启动，请重新安装应用后使用”的解决方法
问题描述: iPhone越狱了,之后在Cydia中安装Anywhere虚拟定位,但是打开app提示:后台服务未启动,请重新安装应用后使用. 程序无法正常使用... 解决方法: 打开Cydia-已安装, ...
- 网站定位之---根据IP获得区域
记得以前做一个培训机构网站时候需要定位,那时候用的搜狐的api,不是很精准. demo:https://github.com/dunitian/LoTCodeBase/tree/master/NetC ...
- CSS Position 定位属性
本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...
- CSS浮动、定位
这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...
- JS实现页面进入、返回定位到具体位置
最为一个刚入职不久的小白...慢慢磨练吧... JS实现页面返回定位到具体位置 其实浏览器也自带了返回的功能,也就是说,自带了返回定位的功能.正常的跳转,返回确实可以定位,但是有些特殊场景就不适用了. ...
- 如何定位Oracle数据库被锁阻塞会话的根源
首先再次明确下,数据库因为要同时保证数据的并发性和一致性,所以操作有锁等待是正常的. 只有那些长时间没有提交或回滚的事物,阻塞了其他业务正常操作,才是需要去定位处理的. 1.单实例环境 2.RAC环境 ...
- iOS开发系列--地图与定位
概览 现在很多社交.电商.团购应用都引入了地图和定位功能,似乎地图功能不再是地图应用和导航应用所特有的.的确,有了地图和定位功能确实让我们的生活更加丰富多彩,极大的改变了我们的生活方式.例如你到了一个 ...
- 企业IT管理员IE11升级指南【16】—— 使用Compat Inspector快速定位IE兼容性问题
企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...
- 【初探Spring】------Spring IOC（三）：初始化过程---Resource定位
我们知道Spring的IoC起到了一个容器的作用,其中装得都是各种各样的Bean.同时在我们刚刚开始学习Spring的时候都是通过xml文件来定义Bean,Spring会某种方式加载这些xml文件,然 ...
随机推荐
- Tornado学习笔记(一) helloword/多进程/启动参数
前言 当你觉得你过得很舒服的时候,你肯定没有在进步.所以我想学习新的东西,然后选择了Tornado.因为我觉得Tornado更匹配目前的我的综合素质. Tornado学习笔记系列主要参考<int ...
- CDH运维
1.单个节点宕机后,想可能存在的问题: 时间同步是否正常运行 hbase对时间是否同步很敏感 2.zookeeper报警 ZooKeeper 服务 canary 因未知原因失败. 该警报是在重启CM的 ...
- SQL Server 2012-2016-2017 简体中文版下载和序列号
注:本文来源于<SQL Server 2012-2016-2017 简体中文版下载和序列号> SqlServer 2017 下载地址及密钥 下载地址:ed2k://|file|cn_sql ...
- OCP 相关课程列表
OCP 相关课程列表 第一天:Linux基础 和 Oracle 11 R2 数据库安装教程图解 1:< VM 安装 linux Enterprise_R5_U4_Server_I386_DVD教 ...
- Confluence 6 考虑使用自定义 CSS
CSS 的知识储备 如果你没有有关 CSS 的相关知识,请参考页面 CSS Resources section 中的内容.当你打算开始对 Confluence 的样式表进行修改之前,你应该对 CSS ...
- 给artDialog插件增加动画效果
领导想给弹窗增加几种动画效果,以前用过layer弹窗,效果不错,它的动画是用的样式,实现很简单,所以把动画拷贝了过来,打包到现在的artDialog.js里... 使用方式:新增配置参数{anim:4 ...
- map函数和reduce函数的区别
①从参数方面来讲:map()函数: map()包含两个参数,第一个是参数是一个函数,第二个是序列(列表或元组).其中,函数(即map的第一个参数位置的函数)可以接收一个或多个参数.reduce()函数 ...
- IntersectionObserver API 使用教程
转载:原文地址:http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html 网页开发时,常常需要了解某个元素是否进入了&q ...
- mongoDB通过_id删除doc
转载: 点击查看原文 做项目遇到一个需求,需要根据mongodb数据记录里面的_id字段删除相应的docs,实际使用时发现直接如下使用 db.collection('infochanges').rem ...
- Android Studio 创建不恰当的虚拟设备导致程序不正常运行
操作系统:Windows 10 x64 IDE:Android Studio 3.2.1 使用Android Studio新建第一个Android程序,一开始在虚拟设备上面调试,不管程序怎么修改,运行 ...