Question

position：fixed的css靠右对其的问题，具体如下

div1，宽度80%，div2要求和div1的右边对其，而且div2有position:fixed的属性，所以不能float，请问如何实现。谢谢。<style type="text/css"> #div1{width: 80%;margin: 0 auto;height: 500px;background-color: red;} #div2{position: fixed;height: 200px;width: 30px;background-color: yellow;} </style> <div id="div1"></div> <div id="div2"></div>
div2嵌套在div1里面亦可
<div id="div1">
<div id="div2"></div>
</div>
总之能实现图片效果即可

Answer 1

<style type="text/css">
#yz_div { width: 1000px; margin: 0 auto;}
#div1{width: 800px; height: 500px;background-color: red; float:left;}
#div3 {width: 200px; float:left; position: relative;}
#div2{width: 30px; position: fixed;height: 200px;background-color: yellow;}
</style>
<div id="yz_div">
    <div id="div1"></div>
    <div id="div3">
        <div id="div2"></div>
    </div>
</div>

追问

这样就不是div1居中了，和其他地方没法对齐

追答

<style type="text/css">
#div1{width: 800px; height: 500px;background-color: red; margin: 0 auto; position: relative;}
#div2{width: 30px; position: fixed;height: 200px;background-color: yellow; margin-left: 800px;}
</style>
<div id="div1">
    <div id="div2"></div>
</div>

Answer 2

<style type="text/css">
#div1{width: 80%;margin: 0 auto;height: 500px;background-color: red;}
#div2{position: fixed; left:90%; top:50px; height: 200px; width: 30px;background-color: yellow;}
</style>
<div id="div1"></div>
<div id="div2"></div>

追问

这个肯定不行，自适应都会有个min-width
比如我给div1一个min-width:600px; 你再试试

追答

#div1{position: relative; width: 80%; min-width:600px; margin: 0 auto; height: 500px; background-color: red;}
#div2{position: fixed; height: 200px; width: 30px; background-color: yellow;}
#div3{position: absolute; right:-30px; width: 30px}

Answer 3

Vue实践-CSS样式position/display/float属性对比使用