博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
定位-相对定位
阅读量:4685 次
发布时间:2019-06-09

本文共 949 字,大约阅读时间需要 3 分钟。

      
定位

  输出:

定位:将指定的元素摆放到页面的任意位置

可以通过position属性来设置元素的定位

输入static

.box2{        width:100px;        height: 100px;        background-color: rgb(231, 223, 143);        position: static;      }

输出:元素没有移动,static为默认值

relative:相对定位

.box2{        width:100px;        height: 100px;        background-color: rgb(231, 223, 143);        position: relative;      }

输出:当开启了元素的相对定位以后,而不设置偏移量时,元素不会发生任何变化

 输入偏移量(left,right,top,bottom,一般选择水平方向的一个偏移量和垂直方向的一个偏移量进行定位就可以):

.box2{        width:100px;        height: 100px;        background-color: rgb(231, 223, 143);        position: relative;        left: 50px;        top: 100px;      }

 输出:1、相对定位 relative 是相对于元素在文档流中原来的位置进行定位

            2、相对定位会使元素上升一个层级

    3、相对定位的元素不会脱离文档流

插入一个内联元素:

span{        background-color: rgb(209, 198, 209);        position: relative;      }

 

span元素

 

 输出:相对定位不会改变元素的性质,块元素还是块元素,内联元素还是内联元素

 

 

转载于:https://www.cnblogs.com/-xiao/p/9634305.html

你可能感兴趣的文章
SQL 优化经验总结34条
查看>>
开源 视频会议 收藏
查看>>
核心J2EE模式 - 截取过滤器
查看>>
test1
查看>>
jquery ajax 局部table 刷新技术
查看>>
类的关联、组合、聚合关系
查看>>
binary hacks读数笔记(ld 链接讲解 二)
查看>>
SKPhysicsJoint类
查看>>
在Ubuntu下编译Qt错误及处理办法
查看>>
LVS-Keepalived高可用集群(DR)
查看>>
day3_python可变的类型、不可变的类型
查看>>
数据结构(3)-线性表顺序结构的合并操作
查看>>
6个html5页面适配iphone6的技巧
查看>>
Use Slim to overview model in Tensorflow like model.summary() in Keras
查看>>
《编写高质量代码--Web前端开发修炼之道》读书笔记
查看>>
Arduino超级马里奥游戏机
查看>>
Objective-C数组
查看>>
.net开源CMS
查看>>
你懂AI吗(1)
查看>>
双拼输入法
查看>>