css的相对定位

二、相对定位

了解层模型的了绝对定位,接下来我们就来聊聊相对定位。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。设置一个元素为相对定位,只需要设置position:releative。通过一个简单的例子认识什么是相对定位:我们定义一个div,样式设置为

div{

width: 200px;

height: 200px;

border: 1px solid green;

}

此时我们可以看到在页面上显示为

此时我们对它的样式做一些修改

div{

width: 200px;

height: 200px;

border: 1px solid green;

position: relative;

left:100px;

top: 50px;

}

此时页面显示的效果:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,692评论 1 92
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 4,599评论 0 1
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 8,609评论 0 5
  • Html 标签 斜体 粗体 单独的样式 引用文本 长文本引用 换行 空格 分割线 地址信息 单行代码 多行代码 无...
    SunnySky_阅读 3,587评论 0 5
  • 生活中总有那么多的不如意,两个人生活在一起难免磕磕绊绊,生气的时候会想出最解恨的话语,伤心的时候也真的是失望至极呢...
    铜豌豆xyn阅读 1,562评论 2 1

友情链接更多精彩内容