<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             /*定位:

                position:定位属性;

             /*relative:生成相对定位元素,元素所占据的文档流的位置不变,元素本身相对文档流的位置进行偏移*/

             /*absolute:生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位;*/

             /*fixed:生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览窗口进行定位*/

             /*static:默认值,没有定位,元素出现在正常的文档流中,相对于取消定位属性或者不设置定位属性*/

             body{

                 margin: 0;

             }

             .position1{

                 width: 200px;

                 height: 200px;

                 background-color: yellowgreen;

                 text-align:center;

                 line-height:200px;

                 position: relative;

                 /*以元素本身当前位置为参考点*/

                 left: 100px;

                 top:100px

             }

             .position2{

                 width: 200px;

                 height: 200px;

                 background-color: yellow;

                 text-align:center;

                 line-height:200px;

                 position:absolute;

                 /*以设置了定位的父(爷...)级元素当前位置为参考点*/

                 left: 100px;

                 top:100px

             }

             .position3{

                 width: 200px;

                 height: 200px;

                 background-color: gray;

                 text-align:center;

                 line-height:200px;

                 position:fixed;

                 /*以浏览窗口为参考点,不会随滚动条的移动而移动*/

                 left: 300px;

                 top:300px

             }

             .fix{

                 width: 80px;

                 height: 20px;

                 line-height: 20px;

                 text-align: center;

                 background-color: gainsboro;

                 position: fixed;

                 /*以浏览窗口为参考点,不会随滚动条的移动而移动*/

                 bottom: 20px;

                 left: 50px

             }

         </style>

     </head>

     <body style="height: 5000px;">

         <div class="position1">

             box1

             <div class="position2">box2</div>

             <div class="position3">box3</div>

         </div>

         <div class="fix">

             返回顶部

         </div>

     </body>

 </html>

CSS-15-定位的更多相关文章

  1. 教你玩转CSS Position(定位)

    CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使 ...

  2. CSS 的定位方式和含义

    CSS 的定位方式和含义 总结一下 CSS 的定位方式.CSS 的定位 position 是处理页面布局时非常重要的属性. CSS 中有 3 种基本的定位机制:普通流.浮动和绝对定位. 在没有指定的情 ...

  3. CSS中定位机制的想法

    对于一个刚刚接触css的新手而言,CSS的定位机制可能是最让人头疼的一件事情了, 接下来我们了解一下CSS的定位机制. position:static | relative | absolute | ...

  4. 转：Selenium之CSS Selector定位详解

    CSS selector定位 CSS(Cascading Style Sheets)是一种语言,它被用来描述 HTML 和 XML 文档的样式.  百度输入框: <input name=&quo ...

  5. CSS 中定位的使用

    position relative 设置区块基准点为左上角(相对定位 以区块的左上角为基准点 仍然会暂居原来的位置) a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元 ...

  6. css的定位机制

    牛腩新闻发不系统中遇到了CSS(Cascading style sheets),第一次接触,比较陌生还!因为CSS很多关于元素定位的问题,并且很多情况下元素的位置以像素精度计.一个不小心就很头疼,为此 ...

  7. css区块定位之浮动与清除属性

    float属性将所属标记的显示空间指定为一个浮动元素,并使其周围对象按一定的方式环绕它排列. float属性的作用就象图像和表格的align属性一样,但可以用到任何元素上. clear属性的作用是禁止 ...

  8. CSS之定位布局（position，定位布局技巧）

    css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设 ...

  9. Selenium自动化-CSS元素定位

    接下来,开始讲解 CSS元素定位. CSS定位速度快,功能多,但是不能向上查找,比 xpath好用,是本人认为最好用的定位方式   大致用法总结: 具体使用仿上篇博客.http://www.cnblo ...

  10. selenium中CSS选择器定位

    selenium元素定位,CSS选择器定位效率会高很多. CSS选择器用于选择你想要的元素的样式的模式.表格摘自“菜鸟教程”,具体用法可去查阅 选择器 示例 示例说明 CSS .class .intr ...

随机推荐

  1. MFC防止进程重复建立

    原文:https://blog.csdn.net/zhang11wu4/article/details/7100839 在APP类的InitInstance()的最前面加入以下代码,建立互斥区,可防止 ...

  2. docker 挂载目录挂载不上**

    最近做项目做一个shared Dynamodb, 使用docker挂载一个image,发现怎么都挂载不上, 使用 $ pwd E:\Work\Aws\git\schema\dynamodb\local ...

  3. Linux使用expect和rsync实现密码自动输入无人值守自动同步备份

    我们常用sudo,ssh.ftp命令操作服务器或者修改权限的时候都会要求输入password,但是shell脚本运行中该如何交互实现自动输入密码呢? 下面总结三种实现方法. 一.重定向:用重定向方法实 ...

  4. 【软帝学院】女生不适合学习java？其实女生学java更有优势，更好就业！

    女生适合学java吗?女生做IT怎么样 首先要表明我的观点,编程是不分男女,什么女生不适合学编程的说法,从客观上来说,我觉得这是一种偏见. 不少人潜意识里认为女生不适合从事IT开发岗位的工作,因为他们 ...

  5. python tkinter动态追加按钮等控件可能遇到的问题

    小爬最近给同事制作一个小爬虫:具体要求: 1.每天自动定时触发: 2.模拟用户自动登陆: 3.自动爬取对应API接口数据: 4.对爬取结果进行逻辑判断,对符合条件的数据进行规则化列示: 5.列示的行项 ...

  6. 使用原生JDBC方式对数据库进行操作

    使用原生JDBC方式对数据库进行操作,包括六个步骤: 1.加载JDBC驱动程序 在连接数据库之前,首先要加载想要连接的数据库的驱动到JVM.可以通过java.lang.Class类的静态方法forNa ...

  7. 「算法竞赛进阶指南」0x01 最短Hamilton路径 解题报告

    题目在这里啊题目在这里~ Hamilton路径:将所有点都遍历刚好一次的路径 思路: 数据范围比较小(1~20),所以我们可以考虑暴力中的枚举 数组f[i][j]​ i的二进制表示选取了哪些点 j表示 ...

  8. Java散点

    1.在Java中,所有需要保存在常量池中的数据,长度最大不能超过65535,这当然也包括字符串的定义

  9. Eclipse配置运行内存

    对于一些大的项目,运行时等待过长可能出现内存溢出现象,需要重新配置IDE运行内存大小,如下: 1.配置Eclipse.ini 如图再改大点: -Xms512m-Xmx512m 2.JDK内存扩大 Wc ...

  10. 由数据迁移至MongoDB导致的数据不一致问题及解决方案

    故事背景 企业现状 2019年年初,我接到了一个神秘电话,电话那头竟然准确的说出了我的昵称:上海小胖. 我想这事情不简单,就回了句:您好,我是小胖,请问您是? "我就是刚刚加了你微信的 xx ...