zoukankan      html  css  js  c++  java
  • 关于div的定位

    参考文章:http://hi.baidu.com/_open_/blog/item/c45f31d17f971c3b9a502711.html 

    position:absolute的div不挤占页面其他元素空间,悬浮于其上

    position:relative 挤占页面其他元素空间 

    下面几个例子,运行下即知区别。

    例1: 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>div定位测试</title>
    </head>
    <body>
        <div id ="divFirst" style ="400px; height:50px;background-color:#FF00FF;">这里是divFirst</div>
        <div id ="divSecond" style ="400px; height:50px;background-color:#01DFD7;">这里是divSecond</div>
        <p><font color="#FF0000">*</font>&nbsp;在普通的文档流中,div块级元素是自上而下依次排列的</p>
    </body>

    </html> 

    例2:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
       <title>div定位测试2</title>
    </head>
    <body>
        <div id ="divFirst" style ="400px; height:50px;background-color:#FF00FF;">这里是divFirst</div>
        <div id ="divSecond" style ="400px; height:50px;background-color:#01DFD7; position:absolute; top:20px; left:50px;">这里是divSecond</div>
        <div id ="divThird" style ="400px; height:50px;background-color:#FFFF00;">这里是divThird</div>
    </body>

    </html> 

    例3:

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>div定位测试3</title>
    </head>
    <body>
        <div id ="divFirst" style ="400px; height:50px;background-color:#FF00FF;">这里是divFirst</div>
        <div id ="divSecond" style ="400px; height:50px;background-color:#01DFD7; position:relative; top:20px; left:50px;">这里是divSecond</div>
        <div id ="divThird" style ="400px; height:50px;background-color:#FFFF00;">这里是divThird</div>
    </body>
    </html>

    例4:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>div定位测试2</title>
    </head>
    <body>
        <div id ="divFirst" style ="400px; height:100px;background-color:#FF00FF;">这里是divFirst</div>
        <div id ="divSecond" style ="400px; height:100px;background-color:#01DFD7;">这里是divSecond</div>
        <div id ="divThird" style ="400px; height:100px;background-color:#FFFF00;">这里是divThird</div>
        <div id ="divFourth" style ="400px; height:100px;background-color:#01DF01;">
            <div id ="divFifth" style ="100px; height:20px;background-color:#FF8000; top:20px; left:60px; position:absolute;">这里是divFifth</div>
        </div>
    </body>

    </html> 

  • 相关阅读:
    Microsoft .NET Framework 远程执行代码漏洞
    GE PACSystems RX3i 输入验证漏洞
    Windows10 1809版本Windows自动更新服务无法禁用问题解决方案
    企业网络防范Serv-U的漏洞
    jsp安全问题及其解决建议
    Windows XP系统搜索故障及处理办法点点通
    开启路由器的TCP拦截
    从MyIE2平滑升级到Maxthon的完美方案
    全面解析UNIX缓冲区溢出 深度防御体系
    从异常系统进程检查企业网络安全 (二)
  • 原文地址:https://www.cnblogs.com/mabaishui/p/2012473.html
Copyright © 2011-2022 走看看