我正在尝试创建自定义动画播放器。 Three.js用于渲染对象，它可以完美工作。问题是在底部添加类似control选项的内容（例如播放，暂停等）。我不确定，但画布可能是页面的最后一部分。有我的代码：
<body>
<div id="playerContainer">
<div id="renderContainer" style="width:400px;height:300px"></div>
<div id="controlContainer" style="width:400px;height:30px">
<input id="rangeBar" type="range" min="0" max="100" value="0" step="1" style="width:400px;height:30px"/>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<script src="jquery.fullscreen-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/5/Tween.js"></script>
<script>
container = document.getElementById( 'renderContainer' );
bar = document.getElementById( 'rangeBar' );
document.body.appendChild( container );
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, $('#renderContainer').width()/$('#renderContainer').height(), 0.1, 1000);
camera.position.z = 5;
camera.position.y = 0;
camera.position.x = 0;
renderer = new THREE.WebGLRenderer();
renderer.setSize( $('#renderContainer').width(), $('#renderContainer').height()-30 );
container.appendChild( renderer.domElement );
var loader = new THREE.ObjectLoader();
loader.load("model(1).json", function ( obj ) {
scene.add( obj );
render();
},
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
function ( xhr ) {
console.error( 'An error happened' );
}
);
var render = function () {
requestAnimationFrame(render);
renderer.render(scene, camera);
TWEEN.update();
};
render();
</script>
</body>
结果是：
enter image description here
我读了一些关于css中的位置的信息（相对和绝对），并尝试了以下方法：
<div id="playerContainer" style="position: relative;">
<div id="renderContainer" style="width:400px;height:300px"></div>
<div id="controlContainer" style="width:400px;height:30px">
<input id="rangeBar" type="range" min="0" max="100" value="0" step="1" style="position: absolute;top:400px;width:400px;height:30px"/>
</div>
</div>
但效果最差。在这两个解决方案中，
playerContainer仅包含controlContainer，并且当我为该元素设置任何高度时，我的画布仍位于底部。如何获得此层次结构：<PLAYER>
<CANVAS/>
<CONTROL/>
</PLAYER>
最佳答案
尝试在您的CSS中：
#controlContainer {
position: absolute;
bottom: 0;
}
由于
controlContainer具有绝对位置，而playerContainer不是最接近的相对位置，因此controlContainer应该位于底部。也
在绝对放置其容器的情况下，在这种情况下，不需要
position: absolute中的rangeBar。希望这可以帮助。