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