自我评价:走在路上的菜鸟,想着CMS|WEB|SEO,做着可以成为牛掰程序seoer的梦!

当前位置:博客 > 前端开发 > HTML|CSS代码 >

定位之相对定位

作者:灰牛站长•发布时间:2021-07-12 11:22:13•浏览
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
相对定位特点
1.不会离文档流 占位 所有后面的元素不会往前跑
2.可以设置上下左右四个方位
如果同的设置了top和bottom值只有top起作用
如果同时设置了1et和right值只有1eft起作用
3.参照物:自已本身
4.可以设置zinde属性z-ine越大越在上
z-index必须要和定位元素(绝对,相利,固定)同时使用才起作用
*/
.red{
width: 300px;
height: 300px;
background-color: red
}
.green{
width: 200px;
height: 200px;
background-color: green;

position: relative;
left: 50px;
top: 50px;
z-index: 10;
}
.blue{
width: 100px;
height: 100px;
background-color: blue;
position: relative;
z-index: 11;
}
</style>
</head>
<body>
<div class="red">
<div class="green"></div>
<div class="blue"></div>
</div>
</body>
</html>

相关文章

  • 网页布局设计|三列布局-左右绝对定位-中间适应

    网页布局设计|三列布局-左右绝对定位-中间适应

    基本思路: 左右2列采用绝对定位来布局 中间内容部分采用margin挤压出来 HTML结构 div class="container"div class="left"左侧/divdiv class="right"右侧/divdiv class="main"主体...
    2021-07-21 10.07.20
  • html网页布局|两列布局-左右二侧-绝对定位

    html网页布局|两列布局-左右二侧-绝对定位

    基本思路: 给2列添加一个定位的父集区块,并设置定位属性,一般设置为相对定位 给左右2个区块分别使用绝对定位 父集区块/定位父集必须设置宽度width...
    2021-07-21 10.07.57
  • 代码技巧之常用快捷键的整理

    代码技巧之常用快捷键的整理

    常用快捷键的整理 ctr1+C复制 ctr1+V粘贴 ctrl+Z撤销 回到上一步操作 ctr1+D复制整行 ctr1+Z剪切整行 增加/删除单行注释ctrl+/ 增加/删除多行注释ctrl+shift+/ html注释...
    2021-07-12 11.07.53
  • 定位元素的异同点

    定位元素的异同点

    定位的值 position: absolute绝对定位 position: relative相对定位 position: fixed固定定位 定位的相同点和不同点 ===相同点: 可以 设置top/ bottom/ left/right四个方位值,如...
    2021-07-12 11.07.09
  • 定位之固定定位

    定位之固定定位

    固定定位- position: fixed 脱离文档流; 参照物是浏览器的可视窗口;任何元素都可以设置固定定位; 可设置top/ bot tom/left/ right四个方位 可通过z-index改变层级 !...
    2021-07-12 11.07.38

手机端