WEB前端之div css 绝对定位
吕益平 2018-05-23 来源 : 阅读 638 评论 0

摘要:本文主要介绍了WEB前端的div css 绝对定位,通过具体代码介绍,希望对大家学习WEB前端有所帮助。

本文主要介绍了WEB前端的div css 绝对定位,通过具体代码介绍,希望对大家学习WEB前端有所帮助。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
            
            .box1{
                width: 200px;
                height: 200px;
                background-color: red;
            }
            .box2{
                width: 200px;
                height: 200px;
                background-color: yellow;
                /*
                 * 当position属性值设置为absolute时,则开启了元素的绝对定位
                 *
                 * 绝对定位:
                 *     1.开启绝对定位,会使元素脱离文档流
                 *     2.开启绝对定位以后,如果不设置偏移量,则元素的位置不会发生变化
                 *     3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的(一般情况,开启了子元素的绝对定位都会同时开启父元素的相对定位)
                 *         如果所有的祖先元素都没有开启定位,则会相对于浏览器窗口进行定位
                 *     4.绝对定位会使元素提升一个层级
                 *     5.绝对定位会改变元素的性质,
                 *         内联元素变成块元素,
                 *         块元素的宽度和高度默认都被内容撑开
                 */
                position: absolute;
                
                /*left: 100px;
                top: 100px;*/
                
            }
            .box3{
                width: 300px;
                height: 300px;
                background-color: yellowgreen;
            }
            
            .box4{
                width: 300px;
                height: 300px;
                background-color: orange;
                /*开启box4的相对定位*/
                /*position: relative;*/
            }
            
            .s1{
                width: 100px;
                height: 100px;
                background-color: yellow;
                
                /*开启绝对定位*/
                position: absolute;
            }
            
        </style>
        
    </head>
    <body>
        
        <div class="box1"></div>
        <div class="box5">
            <div class="box4">
                <div class="box2"></div>
            </div>
        </div>
        
        <div class="box3"></div>
        
        <span class="s1">我是一个span</span>
    </body>
</html>


希望这篇文章可以帮助到你,总之同学们,it资讯尽在职坐标。


本文由 @职坐标 发布于职坐标。未经许可,禁止转载。
喜欢 | 2 不喜欢 | 0
看完这篇文章有何感觉?已经有2人表态,100%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论
本文作者 联系TA

熟悉企业软件开发的产品设计及开发

  • 57
    文章
  • 3932
    人气
  • 90%
    受欢迎度

已有40人表明态度,90%喜欢该老师!

进入TA的空间
名师指导 直通车
  • 索取资料 索取资料 索取资料
  • 答疑解惑 答疑解惑 答疑解惑
  • 技术交流 技术交流 技术交流
  • 职业测评 职业测评 职业测评
  • 面试技巧 面试技巧 面试技巧
  • 高薪秘笈 高薪秘笈 高薪秘笈
TA的其他文章 更多>>
java语言实现栈的顺序存储与链式存储
经验技巧 100% 的用户喜欢
Java语言之Java Socket NIO示例
经验技巧 67% 的用户喜欢
编程语言之Mybatis 一对一关联查询
经验技巧 100% 的用户喜欢
编程语言之Cookie实现浏览商品历史记录
经验技巧 100% 的用户喜欢
一天天都在说hadoop,到底什么才是hadoop呢?
经验技巧 33% 的用户喜欢
其他海同名师 更多>>
刘新华
刘新华 联系TA
实力型。激情饱满,对专业充满热情
吴翠红
吴翠红 联系TA
独创“教、学、练、测”循环教学模式
黄泽民
黄泽民 联系TA
擅长javase核心技术
程钢
程钢 联系TA
擅长大型企业商业网站开发和管理
孔庆琦
孔庆琦 联系TA
对MVC模式和三层架构有深入的研究
经验技巧30天热搜词 更多>>

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:13167058313
小职老师的微信号:13167058313

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    ICP许可  沪B2-20190160

站长统计