css绝对定位之对齐居中版心内容

假如我想让一个盒子固定在我中部版心位置,应该怎么办呢?
方法如下:
没有定位之前,他们是普通的两个盒子,html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="fixed.css">
</head>
<body>
    <div class="nav"></div>
    <div class="box"></div>
</body>
</html>

css(fixed.css)代码如下:

.box {
     
    width: 800px;
    height: 800px;
    background-color: pink;
    margin: 0 auto;
}
.nav {
     
    width: 150px;
    height: 300px;
    background-color: powderblue;
}

此时的运行结果:
css绝对定位之对齐居中版心内容_第1张图片

这不是我们想要的,我们想要小盒子靠在大盒子右部。应该怎么做呢?
只要改css就可以啦。。
css代码如下:

.box {
     
    width: 800px;
    height: 800px;
    background-color: pink;
    margin: 0 auto;
}
.nav {
     
    width: 150px;
    height: 300px;
    background-color: powderblue;
    position: fixed;
    left: 50%;
    margin-left: 400px;
}

css绝对定位之对齐居中版心内容_第2张图片
运行结果如下:
css绝对定位之对齐居中版心内容_第3张图片
css绝对定位之对齐居中版心内容_第4张图片
设置大盒子高度更大,滚动条滚动的时候小盒子位置也不会变哟,这是你想要的效果吗?
css绝对定位之对齐居中版心内容_第5张图片
方法总结:

  1. 在小盒子上设置固定定位先:position:fixed
  2. 让小盒子先占整个浏览器左边50%的距离。left:50%
  3. 再让小盒子距离大盒子左边距根据实际调整就好啦(大于等于大盒子宽度一半,则到大盒子右边啦)

你可能感兴趣的:(CSS,定位,css,html)