day6(定位)

相对定位

  • 1相对定位是相对自己的原本的位置定位
    position:relative;

绝对定位

  • 2在父级的基础上的绝对的位置(与其给了定位的离得最近的父级)
    position:absolutive;

  • 3div悬浮在屏幕上
    position:fixed;

  • 4搜索框格式

        <div class="search">
          <input> 
          <button></button>
        </div>
    
  • 5 定位垂直居中


    1.png
 .parent{
            position: relative;
            width:300px;
            height:300px;
            background:red;
        }
        .child{
            position:absolute;
            width:50px;
            height:50px;
            background:green;
            left:50%;子元素left,top值给百分比,是相对于父元素的width,height而言的
            top:50%;
            margin-left:-25px;(height的一半)
            margin-top: -25px;
        }

  • 6弧度
    border-radius
  • 7堆叠顺序
    z-index
    设置给了absolute定位元素的堆叠顺序
    数字越大,顺序越前,越先显示
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 定位属性: 定位就是指把元素(标签)放在哪个位置。实际上,每个元素都有个定位属性:position。其有4个值: ...
    _Jeff_阅读 2,563评论 0 0
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 11,435评论 2 66
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,138评论 1 45
  • 1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素 浮动元素是设置float...
    Volcaner阅读 2,784评论 0 0