zoukankan      html  css  js  c++  java
  • css 定位

    对于(例如元素div1)position:absolute时,是相对于已定位的最近父元素,如果没有已定位的父元素,则相对于初始包含块(html)

    其中这里说的"已定位的父元素"是指position属性为relative,absolute,fixed的元素,如果position的值为static或不存在,则div1则absolute则不相对于该父元素,而是相对于初始包含块。

    在一个一个框包含另一个框中,

    eg:

    <div class="one">

    <div class="two"></div>

    </div> 

    div.two相对于div.one进行定位,

    如果div.two为absolute定位,则不考虑div.one的padding效果。但是会考虑div.two自身的margin效果。

    如果div.two为relative定位,是相对与自身进行定位,要考虑div.one的padding效果。 

    eg:例如

    <style>


    .one
    {
    position:relative;
    margin:auto;
    400px;
    height:400px;
    border:2px solid blue;
    box-sizing:border-box;
    }
    .two
    {
    margin:20px;
    top:0px;
    left:0px;
    position:absolute;
    200px;
    height:200px;
    border:2px solid red;
    }
    </style>

     当.two(position:absolute)中的top:0px left:0px 时既使div.one有padding值,但是div.two还是贴着div.one的左上角。但是div.two有margin值时,要考虑margin的效果,div.two的左上角不在贴着div.one的左上角。

  • 相关阅读:
    css基础教程
    网页加载-上下幕布分开
    Vue-Aixos
    webpack学习
    Vue、Element 路由跳转,左侧菜单高亮显示,页面刷新不会改变当前高亮菜单
    Vue知识概括
    JSON.parse() 与 JSON.stringify()
    Bootstrap4 样式笔记
    ES6基础语法
    V-model 双向绑定的原理是什么?
  • 原文地址:https://www.cnblogs.com/feng12345/p/5440981.html
Copyright © 2011-2022 走看看