position属性规定了元素的定位类型，默认为static。
该属性还可以有下值：
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
relative：生成相对定位的元素，相对于其正常位置进行定位。
inherit：规定应该从父元素继承 position 属性的值。

  <style>

      body{

          height: 2000px  /*这里将body的高度设置为2000px是为了区分absolute和fixed的差别*/

      }

      .test-div{

          position:fixed;

          left:50px;

          top:50px

      }

      .out-div{

          width: 300px;

          height: 300px;

          background: purple;  /*这里定义个背景，让我们知道这个div在哪*/

          margin:50px 0px 0px 50px;

          position: relative

      }

      .in-div{

          position:absolute;

          left:50px;

          top:50px

      }

  </style>

  <body>

  <div class="test-div">Hello World</div>

  <div class="out-div">

      <div class="in-div">Hello World</div>

  </div>

    </body>

position定位问题的更多相关文章

  1. 关于CSS 的position定位问题

    对于初学者来说,css的position定位问题是比较常见的.之前搞不清楚postion定位是怎么回事,排版一直歪歪斜斜的,老是排不好 css的定位一般来说,分为四种: position:static ...

  2. 解决IE6下固定定位问题 使用position:fixed

    IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法. 如果我们需要做某个元素始终位于浏览器的底部,不会因为浏览器窗口的缩 ...

  3. 解决IE6浏览器下position:fixed固定定位问题

    像你所遇到的问题一样, IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法.如果我们需要做某个元素始终位于浏览器的底部, ...

  4. IOS7 position:fixed 定位问题

    在IOS7下position:fixed定位会出一些bug. 输入框 focus 状态下 fixed会随之改变.参见该页面详细描述(http://www.cnblogs.com/zhangdaipin ...

  5. CSS中margin和position:relative的定位问题

    一.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  6. CSS position: absolute、relative定位问题详解

    CSS2.0 HandBook上的解释:  设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位,而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的 ...

  7. ie6下position:fixed定位问题

    1. *html{ background-image:url(about:blank); background-attachment:fixed;}2.将需要用固定定位的元素中加上_position: ...

  8. 解决 IE6 position:fixed 固定定位问题

    #e_float{ _position:absolute; _bottom:auto; _right:50%; _margin-right:-536px; _top:expression(eval(d ...

  9. 完美解决 IE6 position:fixed 固定定位问题

    关于 position:fixed; 属性 生成绝对定位的元素,相对于浏览器窗口进行定位. 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定. pos ...

随机推荐

  1. How to: Define a Windows Communication Foundation Service Contract

    This is the first of six tasks required to create a basic Windows Communication Foundation (WCF) app ...

  2. WordPress Backdoor未授权访问漏洞和信息泄露漏洞

    漏洞名称: WordPress Backdoor未授权访问漏洞和信息泄露漏洞 CNNVD编号: CNNVD-201312-497 发布时间: 2013-12-27 更新时间: 2013-12-27 危 ...

  3. Python‘ssl.match_hostname()’函数SSL证书验证安全绕过漏洞

    漏洞名称: Python‘ssl.match_hostname()’函数SSL证书验证安全绕过漏洞 CNNVD编号: CNNVD-201312-033 发布时间: 2013-12-04 更新时间: 2 ...

  4. cgi ISAP sapi等

    1.CGI和FastCGI是apache处理php脚本的其中两种工作模式,还有ISAPI,SAPI等 2.而php-fpm并不是一种工作模式,而是一个PHP在FastCGI模式运行下的进程管理器,全称 ...

  5. iOS7 iOS8 毛玻璃效果的分别实现

    iOS8用系统的, iOS7用第三方的(效果还是挺快的.) https://github.com/KiranPatel-iOS/KPBlurEffect [_headBGIV sd_setImageW ...

  6. js中字符串转换为日期和比较大小

    本文转载于:http://yun342173024.iteye.com/blog/1873756在做前端校验的时候,要做日期比较的校验,在js中把字符串转化为日期,一时之间还真不知道在js中怎么把一个 ...

  7. struts1.3异常处理机制

    当Struts的控制器捕获到异常时,在异常处理块中,创建描述异常信息的ActionMessage对象,并放入ActionMessages对象中.然后把ActionMessages对象存放到一定范围内( ...

  8. 【CSS】Beginner6:Border

    1.border-style:solid实线,dashed虚线,double双线,dotted点状,groove凹槽,ridge垄状,inset,outset 2.border0-width:bord ...

  9. Html笔记(五)表格

    表格标签: <table> 组成: 标题标签: <caption>给表格提供标题. 表头标签: <th> ,一般对表格的第一行或者第一列进行格式化,就是粗体显示,并 ...

  10. leetcode—triangle

    1.题目描述 Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adj ...