如何定位div

我正在嘗試創建一個自定義動畫播放器。 Three.js用於渲染對象，並且完美運行。問題是在底部添加諸如控制選項之類的東西（比如播放，暫停等）。我不確定，但可能畫布呈現爲頁面的最後一部分。這裏是我的代碼：如何定位div

<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> 
    <RENDERER/> 
    <CONTROL/> 
</PLAYER>

@UPDATE 我想這樣的事情：

時：

-green - playerContainer 
-red - rendererContainer 
-yellow - controlContainer

來源

2017-04-14 karl person

我把所有的代碼放在那裏（除了'body'標籤有空頭'）。我有模型作爲JSON文件，我應該把它放在那裏？ –

所以你想讓你的'＃playerContainer'在你畫布的底部？ – nashcheez

@nashcheez我編輯我的文章，並把那裏簡單的圖像 –

你必須使用JavaScript來追加在繪製完畫布後，將renderContainer元素放入playerContainer元素中。

但是，由於您必須附加renderContainer作爲playerContainer的第一個孩子，因此您應該使用insertBefore()。

此代碼應該做的伎倆：

var playerContainer = document.getElementById("playerContainer"); 

playerContainer.insertBefore(document.getElementById("renderContainer"), playerContainer.firstChild);

我創建了一個搗鼓你。你可以看到這裏的工作示例：https://jsfiddle.net/nashcheez/LvjykL23/

來源

2017-04-14 13:56:54 nashcheez

回答

相關問題