标签：定位 15 前端 height width Html5 background position left
1.相对定位
<style>
div{
width: 300px;
height: 300px;
background: red;
}
.box1{
background: cyan;
/* 1.相对定位 */
position: relative;
/* 与定位配套使用的有坐标 两点确定一个位置
水瓶坐标（left/right） 垂直坐标（top/bottom） */
/* left: 110px;
top: 200px; */
right: 100px;
bottom:200px ;
}
/* 相对定位在文档流占位置 它是根据初始位置（来当作参照物）
注意 几乎从来不单独使用相对定位 都是配合绝对定位使用 */
</style>
</head>
<body>
<div class="box1">定位position</div>
<div class="box2">定位position</div>
</body>
</html>
<!-- 定位一般用于一层上面叠加另一层 -->
2.绝对定位
<style>
.big{
width: 600px;
height: 600px;
background: pink;
/* 相对定位 */
position: absolute;
}
.son1{
width: 100px;
height: 100px;
background: red;
/* 设置绝对定位 */
position: absolute;
/* 绝对定位一定要结合定位坐标使用 水平坐标（left/right） 垂直坐标（top/bottom）*/
/* left: 0;
top: 0; */
right: 0;
bottom: 0;
/* 对于当前页面浏览器而言定位 */
}
.son2{
width: 150px;
height: 120px;
background: palegreen;
}
/* 绝对定位在文档流不占位置 根据有定位属性父元素定位 如果向上查找没有 祖元素一直没有定位 最后才根据浏览器定位 */
</style>
</head>
<body>
<div class="big">
<div class="son1"></div>
<div class="son2"></div>
</div>
</body>
3.蒙层
<style>
.big{
width: 400px;
height: 400px;
background: pink;
border: 5px dotted deeppink;
/* 有宽高的div 水平居中 */
margin: 100px auto;/* 上下100 */
position: relative;/* 设置相对定位不用写坐标 */
}
img{
width: 100%;/* 代表图片大小和父元素一致 也就是big */
height: 100%;
}
.mark{/* 这个梦层和图片一样大 */
width: 400px;
height: 400px;
background: rgba(0,0,0,0.9);
/* rgba(颜色值,颜色值,颜色值,透明度) 颜色值1-255 透明度0-1 */
/* 想要梦层盖住图片 一层上面叠加另一层 绝对定位 */
position: absolute;/* 设置绝对定位 必须写坐标 */
left: 0;
top: 0;
/* 过渡时间 */
transition: 3s;
}
/* 鼠标滑过big 梦层透明度为0 也是消失的一种 之前的消失有dispaly：none（没有过渡时间） */
.big:hover .mark{/* 鼠标滑过为黑色 */
background: rgba(0,0,0,0.0);
}
</style>
</head>
<body>
<div class="big">
<img src="./1.gif" alt="">
<div class="mark"></div>
</div>
</body>
4.绝对定位2
<style>
*{
margin: 0;
padding: 0;
}
.big{
width: 400px;
height: 400px;
/* 父相子绝 */
position: relative;
}
img{
/* 设置和big一样大 */
width: 400px;/* 或者100% */
height: 400px;
/* 解决图片3px问题 */
vertical-align: top;
border: 0;
}
p{
background: rgba(255, 0, 160, 0.8);
/* 在一层叠加一层 */
position: absolute;
left: 0;
bottom: 0;
/* 设置单行文本省略号 */
width: 100%;
white-space:normal;/* 让文字在一行显示 */
overflow: hidden;/* 溢出隐藏 */
text-overflow: ellipsis;/* 后面隐藏的变成省略号 */
}
span{
background: #f90;
}
</style>
</head>
<body>
<div class="big">
<img src="./1.gif" alt="">
<p><span>10号</span> 今天是周一 再过两周就能过年了</p>
</div>
</body>
5.绝对定位3（二级导航栏）
1）html部分
<link rel="stylesheet" href="../css/nav.css">
</head>
<body>
<!-- 头部 外围有颜色 外围➕版心 -->
<div id="headerWrapper">
<div id="header">
<a href="javascript:;">首页</a>
<a href="javascript:;">四个文字</a>
<a href="javascript:;">他有二级菜单</a>
<a href="javascript:;">四个文字</a>
<a href="javascript:;">四个文字</a>
<a href="javascript:;">四个文字</a>
<a href="javascript:;">四个文字 <a>
<a href="javascript:;">四个文字</a>
</div>
</div>
<!-- 大图部分 -->
<div id="banner">
<img src="./2.jpg" alt="">
</div>
</body>
2）css部分
*{
margin: 0;
padding: 0;
}
#headerWrapper{
background: #f90;
}
#header{
width: 1200px;
height: 100px;
margin: 0 auto;
line-height: 100px;/* 单行文本垂直居中 */
}
#header a{
color: #fff;
text-decoration: none;/* 去除超链接下划线 */
padding: 0 30px;
/* 超链接设置浮动 */
float: left;
}
#header a:hover{
background: #333;
}
#banner{
height: 460px;
position: relative;
overflow: hidden;
}
#banner img{
position: absolute;
top: 0;
left: 50%;
margin-left: -960px;
}
6.banner大图思路
<style>
.big{
width: 700px;
height: 600px;
background:salmon ;
/* 父相子绝 */
position: relative;/* 相对定位 */
}
.son{
width: 200px;
height: 300px;
background: seagreen;
/* 想要水平居中 用绝对定位来做 */
position: absolute;/* 绝对定位 */
left: 50%;top:0;
margin-left: -100px;/* margin-left：负宽度的一半 */
}
</style>
</head>
<body>
<div class="big">
<div class="son"></div>
</div>
</body>
7.banner大图的写法
<style>
*{
margin: 0;
padding: 0;
}
#banner{
/* width: 100%; *//* (1600px) 外围 只写100%*/
/* 设置高度就是图片的高度 */
height: 460px;
background: pink;
position: relative;/* 父相子绝 */
overflow: hidden;/* 溢出隐藏 */
}
#banner img{
/* 水平居中 利用绝对定位 */
position: absolute;
left: 50%;
top: 0;
/* 负宽度的一半 */
margin-left: -960px;
}
</style>
</head>
<body>
<div id="banner">
<img src="./2.jpg" alt="">
</div>
</body>
8.定位层叠性
<style>
.box1{
width: 300px;
height: 300px;
background: palegreen;
/* 设置绝对定位 */
position: absolute;
left: 0;
top: 0;
/* 定位层叠定 值越大 越在上方 默认值为auto */
/* z-index可以设置为负值 但是不用 去div的后面*/
z-index: 1;
}
.box2{
width: 250px;
height: 150px;
background: red;
/* 设置绝对定位 */
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
标签：定位,15,前端,height,width,Html5,background,position,left 来源： https://blog.csdn.net/weixin_64909133/article/details/122407734
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。