【学习笔记（效果研究）】将盒子固定悬浮在其父类容器的右下角，并且当屏幕小于某一宽度时，此父类容器宽为100%的屏幕

本文链接：https://blog.csdn.net/weixin_43194235/article/details/85776564

通过css来使盒子固定悬浮在屏幕某一位置的代码如下

.fixed{
	position: fixed;
	left: 0;
	width: 100%;
	bottom: 0;
}

但是这种方法只能是针对整体浏览器来定位
今天想做到的效果是针对悬浮盒子的父类容器来定位的悬浮框
如下代码

/*父类容器的样式举例和所需代码*/
.wai-z{
	width: 500px;
	height: auto;
	margin:0 auto;
	margin-bottom: 60px;
	background-color: #fff;
	overflow-y:scroll;
}
/*悬浮框的样式举例和所需代码*/
.float-rb{
	width: 70px;
	height: 200px;
	background: pink;
	position: fixed;
	margin: 0;/*关键*/
}

此代码可以使悬浮框是针对其父类容器的位置而去悬浮的
必须使用margin来定位，不可直接使用top bottom left right
但是现在的盒子是悬浮在父类容器左上角的，没有达到我们需要的效果

因为每个屏幕的宽高是不可能一样是定数的，
而且我们的父类容器的宽是当屏幕小于500px时，自动适应屏幕变成100%的，
针对这个情况我用了js取其宽高，
再赋值给悬浮盒子的margin-left和margin-top。

完整代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no" name="viewport">
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<style type="text/css">

.wai{
	width: 100%;
	height: auto;
	background:#61525d;
}
.wai-z{
	width: 500px;
	height: auto;
	margin:0 auto;
	margin-bottom: 60px;
	background-color: #fff;
	overflow-y:scroll;
}
@media (max-width: 500px) {
	.wai-z{
		width: 100%;
	}
}
/*最低部的固定悬浮窗*/
.topbar{
	height: 55px;
	margin: 0px ;
	background: #0d0815;
	opacity: 0.9;
	border: 1px solid #a5a5a5;
	z-index: 99999;
}

.topbar.fixed{
	position: fixed;
	left: 0;
	width: 100%;
	bottom: 0;
}

/*基于父容器的右下悬浮窗*/
.float-rb{
	width: 70px;
	height: 200px;
	background: pink;
	position: fixed;
}

</style>
<body>
	<div class="wai">
		<!-- 底部悬浮 -->
		<div class="topbar fixed">
		</div>


		<div class="wai-z">
			<div id="h5courseCom">
				<!-- 基于父容器的右下悬浮 -->
				<div class="float-rb"></div>
				<!-- 下面的p标签是为了撑开高度看效果 -->
				<p>111</p><p>111</p><p>111</p><p>111</p><p>111</p>
				<p>111</p><p>111</p> <p>111</p><p>111</p><p>111</p>
				<p>111</p><p>111</p><p>111</p><p>111</p><p>111</p>
				<p>111</p><p>111</p><p>111</p><p>111</p><p>111</p>
				<p>111</p><p>111</p> <p>111</p><p>111</p><p>111</p>
				<p>111</p><p>111</p><p>111</p><p>111</p><p>111</p>
				<p>111</p><p>111</p><p>111</p><p>111</p><p>111</p>
				                    
		    </div>
	    </div>
    </div>

    <script type="text/javascript">
        var div1W = $('#h5courseCom').outerWidth(true);//获取到父类盒子的宽度
        var div1H = document.documentElement.clientHeight;//获取到屏幕的可视高度
        var div2 = $('.float-rb');
        div2.css('margin-left',div1W-70);//将获取到的宽度-悬浮窗本身的宽度，赋值给悬浮窗的margin-left
        div2.css('margin-top',div1H-300);//将获取到的高度-悬浮窗本身的高度（这里因为下面本身还带有固定悬浮窗，所以减的比较多，为了好看可以多减点），赋值给悬浮窗的margin-top
    </script>

</body>
</html>