我不能理解最后的先设置左边为50%，然后在左移div块的一半什么意思？是代码这样吗
相关代码：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding:0;
}
.test{
width: 800px;
height: 100px;
background: red;
/*此处写代码*/
position:fixed;
top:0px;
left:50%;
left: 400px;
}
.out{
width: 100%;
height: 2000px;
background-color: #abcdef;
}
</style>
</head>
<body>
<div class="out">
<div class="test">
</div>
<p>1、想要固定的显示在某个部位，肯定是要用到position：fixed。
2、固定在页面的顶端，那么就给top设置为0，不过默认情况下top的值是0，所以可以省略。
3、要在页面中水平居中显示，那么我们就需要设置左边为50%，但是设置完了之后会发现红色的div块并没有居中，此时我们就需要将div块再向左移动div块一半的距离</p>
<p>1、想要固定的显示在某个部位，肯定是要用到position：fixed。
2、固定在页面的顶端，那么就给top设置为0，不过默认情况下top的值是0，所以可以省略。
3、要在页面中水平居中显示，那么我们就需要设置左边为50%，但是设置完了之后会发现红色的div块并没有居中，此时我们就需要将div块再向左移动div块一半的距离</p>
<p>1、想要固定的显示在某个部位，肯定是要用到position：fixed。
2、固定在页面的顶端，那么就给top设置为0，不过默认情况下top的值是0，所以可以省略。
3、要在页面中水平居中显示，那么我们就需要设置左边为50%，但是设置完了之后会发现红色的div块并没有居中，此时我们就需要将div块再向左移动div块一半的距离</p>
<p>1、想要固定的显示在某个部位，肯定是要用到position：fixed。
2、固定在页面的顶端，那么就给top设置为0，不过默认情况下top的值是0，所以可以省略。
3、要在页面中水平居中显示，那么我们就需要设置左边为50%，但是设置完了之后会发现红色的div块并没有居中，此时我们就需要将div块再向左移动div块一半的距离</p><p>1、想要固定的显示在某个部位，肯定是要用到position：fixed。
2、固定在页面的顶端，那么就给top设置为0，不过默认情况下top的值是0，所以可以省略。
3、要在页面中水平居中显示，那么我们就需要设置左边为50%，但是设置完了之后会发现红色的div块并没有居中，此时我们就需要将div块再向左移动div块一半的距离</p><p>1、想要固定的显示在某个部位，肯定是要用到position：fixed。
2、固定在页面的顶端，那么就给top设置为0，不过默认情况下top的值是0，所以可以省略。
3、要在页面中水平居中显示，那么我们就需要设置左边为50%，但是设置完了之后会发现红色的div块并没有居中，此时我们就需要将div块再向左移动div块一半的距离</p><p>1、想要固定的显示在某个部位，肯定是要用到position：fixed。
2、固定在页面的顶端，那么就给top设置为0，不过默认情况下top的值是0，所以可以省略。
3、要在页面中水平居中显示，那么我们就需要设置左边为50%，但是设置完了之后会发现红色的div块并没有居中，此时我们就需要将div块再向左移动div块一半的距离</p><p>1、想要固定的显示在某个部位，肯定是要用到position：fixed。
2、固定在页面的顶端，那么就给top设置为0，不过默认情况下top的值是0，所以可以省略。
3、要在页面中水平居中显示，那么我们就需要设置左边为50%，但是设置完了之后会发现红色的div块并没有居中，此时我们就需要将div块再向左移动div块一半的距离</p><p>1、想要固定的显示在某个部位，肯定是要用到position：fixed。
2、固定在页面的顶端，那么就给top设置为0，不过默认情况下top的值是0，所以可以省略。
3、要在页面中水平居中显示，那么我们就需要设置左边为50%，但是设置完了之后会发现红色的div块并没有居中，此时我们就需要将div块再向左移动div块一半的距离</p>
<p style="color: orangered;">123123123131231213333333311111111111111111111111111</p>
<p>1、想要固定的显示在某个部位，肯定是要用到position：fixed。
2、固定在页面的顶端，那么就给top设置为0，不过默认情况下top的值是0，所以可以省略。
3、要在页面中水平居中显示，那么我们就需要设置左边为50%，但是设置完了之后会发现红色的div块并没有居中，此时我们就需要将div块再向左移动div块一半的距离</p><p>1、想要固定的显示在某个部位，肯定是要用到position：fixed。
2、固定在页面的顶端，那么就给top设置为0，不过默认情况下top的值是0，所以可以省略。
3、要在页面中水平居中显示，那么我们就需要设置左边为50%，但是设置完了之后会发现红色的div块并没有居中，此时我们就需要将div块再向左移动div块一半的距离</p><p>1、想要固定的显示在某个部位，肯定是要用到position：fixed。
2、固定在页面的顶端，那么就给top设置为0，不过默认情况下top的值是0，所以可以省略。
3、要在页面中水平居中显示，那么我们就需要设置左边为50%，但是设置完了之后会发现红色的div块并没有居中，此时我们就需要将div块再向左移动div块一半的距离</p><p>1、想要固定的显示在某个部位，肯定是要用到position：fixed。
2、固定在页面的顶端，那么就给top设置为0，不过默认情况下top的值是0，所以可以省略。
3、要在页面中水平居中显示，那么我们就需要设置左边为50%，但是设置完了之后会发现红色的div块并没有居中，此时我们就需要将div块再向左移动div块一半的距离</p>
<p>1、想要固定的显示在某个部位，肯定是要用到position：fixed。
2、固定在页面的顶端，那么就给top设置为0，不过默认情况下top的值是0，所以可以省略。
3、要在页面中水平居中显示，那么我们就需要设置左边为50%，但是设置完了之后会发现红色的div块并没有居中，此时我们就需要将div块再向左移动div块一半的距离</p><p>1、想要固定的显示在某个部位，肯定是要用到position：fixed。
2、固定在页面的顶端，那么就给top设置为0，不过默认情况下top的值是0，所以可以省略。
3、要在页面中水平居中显示，那么我们就需要设置左边为50%，但是设置完了之后会发现红色的div块并没有居中，此时我们就需要将div块再向左移动div块一半的距离</p><p>1、想要固定的显示在某个部位，肯定是要用到position：fixed。
2、固定在页面的顶端，那么就给top设置为0，不过默认情况下top的值是0，所以可以省略。
3、要在页面中水平居中显示，那么我们就需要设置左边为50%，但是设置完了之后会发现红色的div块并没有居中，此时我们就需要将div块再向左移动div块一半的距离</p><p>1、想要固定的显示在某个部位，肯定是要用到position：fixed。
2、固定在页面的顶端，那么就给top设置为0，不过默认情况下top的值是0，所以可以省略。
3、要在页面中水平居中显示，那么我们就需要设置左边为50%，但是设置完了之后会发现红色的div块并没有居中，此时我们就需要将div块再向左移动div块一半的距离</p><p>1、想要固定的显示在某个部位，肯定是要用到position：fixed。
2、固定在页面的顶端，那么就给top设置为0，不过默认情况下top的值是0，所以可以省略。
3、要在页面中水平居中显示，那么我们就需要设置左边为50%，但是设置完了之后会发现红色的div块并没有居中，此时我们就需要将div块再向左移动div块一半的距离</p>
</div>
</body>
</html>
<!--<!DOCTYPE html>-->
<!--<html>-->
<!--<head>-->
<!-- <meta charset="utf-8">-->
<!-- <title>慕课网</title>-->
<!-- <style type="text/css">-->
<!-- .content{-->
<!-- width: auto;-->
<!-- height: auto;-->
<!-- text-align: justify;-->
<!-- font-family: "Microsoft YaHei UI";-->
<!-- line-height: 24px;-->
<!-- }-->
<!-- .img01{-->
<!-- float: left;-->
<!-- height: 165px;-->
<!-- }-->
<!-- .img02{-->
<!-- float: right;-->
<!-- }-->
<!-- </style>-->
<!--</head>-->
<!--<body>-->
<!--<div class="content">-->
<!-- <img src="http://img1.sycdn.imooc.com\/climg/59c8742e0001bc9607120172.jpg" alt="" class="img01">-->
<!-- 慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。<br/><br/>-->
<!-- 慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基础课程、实用案例、高级分享三大类型，适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点，为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。<br/><br/>-->
<!-- 4月2日，国内首个IT技能学习类应用——慕课网3.1.0版本在应用宝首发。据了解，在此次上线的版本中，慕课网新增了课程历史记录、相关课程推荐等四大功能，为用户营造更加丰富的移动端IT学习体验。<br/><br/>-->
<!-- <img src="http://img1.sycdn.imooc.com\/climg/59c874560001779307120172.jpg" alt="" class="img02">-->
<!-- 老师来自于各大IT公司重要技术岗位，拥有丰富的实战经验。语言平实、通俗易懂，更接地气，传授最有价值的经验之谈。课程内容注重实用性，不仅让学员通过学习能够做出产品，而且学习过程中掌握的方法技巧在实际工作中用得上，能够切实帮助学员提升工作技能。<br/><br/>-->
<!-- 慕课网的绝大多数课程都经过了专业的后期制作，为课程内容匹配了个性化的视觉效果，帮助学员更好地理解课程内容，增加学习的乐趣。-->
<!--</div>-->
<!--</body>-->
<!--</html>-->
还有就是想了解一下，我在父级div添加了一些文字，但是发现这些文字会被那个红色快遮挡，请问有什么办法可以避开这个问题吗，比如让文字始终保持和红色块一定的距离还是环绕红色块，我没能想到解决办法。。。。。
相关截图：
18
收起
正在回答 回答被采纳积分+1
1回答
好帮手慕美
2021-03-10 11:00:13
同学，你好！
1、当通过定位position:fixed设置div的距父元素左边距离为50%;，即div的左边会在屏幕的中间位置
2、将div向左移动div宽度的一半：即设置margin_left为负值。div会向左移动设置的距离。因此可以实现水平居中
3、同学是想要实现图片在中间，文字在左右下环绕的效果吗？目前通过浮动定位实现不了该效果的
祝：学习愉快！
-
努力study #1
懂了，左移50%是整个div块移动了50%，这个时候div左边处于中间位置，要想在移动到中间，只需要减少外边距，让div块相对于当前位置向左移动一半
再问一下，就算不实现文字环绕，可不可以做到，所有的下拉过程中这个div块一直占据上面的位置，文字不会移动到红色div块下面，不会被遮挡，相当于 文字上面是红色长条
应该怎么操作呢？ 去除浮动吗？
2021-03-10 11:12:34
相似问题
登录后可查看更多问答，登录/注册
Python全栈工程师2020
- 参与学习 人
- 提交作业 5211 份
- 解答问题 2433 个
Facebook曾声称“只招全栈工程师”！全栈用人需求猛增，市面人才紧缺。 0基础进击Python全栈开发，诱人薪资在前方！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星