<!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. Java 学习笔记(11)——lambda 表达式

    在写Java代码的时候,如果某个地方需要一个接口的实现类,一般的做法是新定义一个实现类,并重写接口中的方法,在需要使用的时候new一个实现类对象使用,为了一个简单的接口或者说为了一个回调函数就得额外编 ...

  2. win10 配置g++环境

    一.配置g++编译器的环境 1.将g++编译器的位置添加到环境变量path中,安装了C++ IDE的可以在IDE的安装目录下寻找 例如:C:\MySoftware\dev\Dev-Cpp\MinGW6 ...

  3. Linux 创建网络会话

    Linux 创建网络会话 RHEL7系统支持网络会话功能,允许用户在多个配置文件中快速切换(非常类似于firewalld防火墙服务中的区域技术).如果我们在公司网络中使用笔记本电脑时需要手动指定网络的 ...

  4. 雪花算法 Snowflake & Sonyflake

    唯一ID算法Snowflake相信大家都不墨生,他是Twitter公司提出来的算法.非常广泛的应用在各种业务系统里.也因为Snowflake的灵活性和缺点,对他的改造层出不穷,比百度的UidGener ...

  5. 王雅超的学习笔记-大数据hadoop集群部署（十）

    Spark集群安装部署

  6. 构建锁与同步组件的基石AQS：深入AQS的实现原理与源码分析

    Java并发包(JUC)中提供了很多并发工具,这其中,很多我们耳熟能详的并发工具,譬如ReentrangLock.Semaphore,它们的实现都用到了一个共同的基类--AbstractQueuedS ...

  7. ELK学习实验001：Elastic Stack简介

    1 背景介绍 在我们日常生活中,我们经常需要回顾以前发生的一些事情:或者,当出现了一些问题的时候,可以从某些地方去查找原因,寻找发生问题的痕迹.无可避免需要用到文字的.图像的等等不同形式的记录.用计算 ...

  8. 如何学习Java基础

    Java是用于软件开发的最流行的编程语言,无论做自动化测试或者测试开发,Java依然是最重要的选项之一. 为什么要学习Java? Java很容易学习 Java是通用的,面向对象的,高性能,解释型,安全 ...

  9. 【题解】毒蛇越狱(FWT+容斥)

    [题解]毒蛇越狱(FWT+容斥) 问了一下大家咋做也没听懂,按兵不动没去看题解,虽然已经晓得复杂度了....最后感觉也不难 用FWT_OR和FWT_AND做一半分别求出超集和和子集和,然后 枚举问号是 ...

  10. 「Luogu P2508」[HAOI2008]圆上的整点 解题报告

    题面 给定圆的半径,求圆上整点数 这是一道很Nice的数学题!超爱!好吧,由于这道题,我去Study了一下复数(complex number)复杂的数 真棒!!! 有兴趣的戳这里!!!\(\huge ...