html - html css上的div位置

Question

我使用脚本在 div 上显示 highchart。之后当我设置 div 位置时，位置不会改变

当我选择检查元素 div 代码时

<div id="container" class="cont_charts" data-highcharts-chart="0">
<div class="highcharts-container" id="highcharts-0" style="position: relative; overflow: hidden; width: 900px; height: 400px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><svg version="1.1" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="900" height="400"><desc>Created with Highcharts 4.2.5</desc><defs><clipPath id="highcharts-1"><rect x="0" y="0" width="880" height="322"></rect></clipPath></defs><rect x="0" y="0" width="900" height="400" fill="#FFFFFF" class=" highcharts-background"></rect><g class="highcharts-series-group"><path fill="#90ed7d" fill-opacity="0.25" d="M 0 0"></path><g class="highcharts-series highcharts-series-0 highcharts-tracker" transform="translate(10,63) scale(1 1)" style=""><path fill="#7cb5ec" d="M 439.97464268613993 43.0000025823027 A 124.5 124.5 0 0 1 504.62781141075453 61.08808341047538 L 465.95494434166847 124.76429052629533 A 50 50 0 0 0 439.98981633981526 117.50000103706935 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round" transform="translate(0,0)"></path><path fill="#434348" d="M 504.7341909957057 61.15276441706868 A 124.5 124.5 0 0 1 530.9253540462292 82.45395369820031 L 476.5162064442688 133.34496132457843 A 50 50 0 0 0 465.9976670665485 124.79026683416413 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round" transform="translate(0,0)"></path><path fill="#90ed7d" d="M 531.0103546156835 82.54492156011193 A 124.5 124.5 0 1 1 439.8270719977101 43.00012009682088 L 439.9305510030964 117.50004823165497 A 50 50 0 1 0 476.55034321915 133.38149460245458 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round" transform="translate(0,0)"></path></g><g class="highcharts-markers highcharts-series-0" transform="translate(10,63) scale(1 1)"></g></g><g class="highcharts-button" style="cursor:default;" stroke-linecap="round" transform="translate(866,10)"><title>Chart context menu</title><rect x="0.5" y="0.5" width="24" height="22" fill="white" stroke="none" stroke-width="1" rx="2" ry="2"></rect><path fill="#E0E0E0" d="M 6 6.5 L 20 6.5 M 6 11.5 L 20 11.5 M 6 16.5 L 20 16.5" stroke="#666" stroke-width="3"></path><text x="0" style="color:black;fill:black;" y="12"></text></g><g class="highcharts-button" style="cursor:default;" stroke-linecap="round" transform="translate(866,10)"><title>Chart context menu</title><rect x="0.5" y="0.5" width="24" height="22" fill="white" stroke="none" stroke-width="1" rx="2" ry="2"></rect><path fill="#E0E0E0" d="M 6 6.5 L 20 6.5 M 6 11.5 L 20 11.5 M 6 16.5 L 20 16.5" stroke="#666" stroke-width="3"></path><text x="0" style="color:black;fill:black;" y="12"></text></g><text x="450" text-anchor="middle" class="highcharts-title" style="color:#333333;font-size:18px;fill:#333333;width:836px;" y="24"><tspan>Contents of Highsoft's weekly fruit delivery</tspan></text><text x="450" text-anchor="middle" class="highcharts-subtitle" style="color:#555555;fill:#555555;width:836px;" y="46"><tspan>3D donut in Highcharts</tspan></text><g class="highcharts-data-labels highcharts-series-0 highcharts-tracker" visibility="visible" transform="translate(10,63) scale(1 1)" opacity="1" style=""><path fill="none" d="M 486.6836011437602 13 C 481.6836011437602 13 479.52522697450405 26.432617403547397 476.5574624917768 37.02470756437319 L 473.5896980090495 47.61679772519898" stroke="#7cb5ec" stroke-width="1"></path><path fill="none" d="M 542.5030873983751 47.65260558616714 C 537.5030873983751 47.65260558616714 532.4543838437668 53.8582959118025 525.5124164561802 62.39112010955112 L 518.5704490685936 70.92394430729973" stroke="#434348" stroke-width="1"></path><path fill="none" d="M 373.4470316187557 309.2091460825925 C 378.4470316187557 309.2091460825925 381.6342403375256 301.8714556705489 386.0166523258343 291.7821313539889 L 390.39906431414295 281.6928070374289" stroke="#90ed7d" stroke-width="1"></path><g style="" transform="translate(492,3)"><text x="5" style="font-size:11px;font-weight:bold;color:#000000;text-shadow:0 0 6px #FFFFFF, 0 0 3px #FFFFFF;fill:#000000;text-rendering:geometricPrecision;" y="16"><tspan>Driver Seat Belt</tspan></text></g><g style="" transform="translate(548,38)"><text x="5" style="font-size:11px;font-weight:bold;color:#000000;text-shadow:0 0 6px #FFFFFF, 0 0 3px #FFFFFF;fill:#000000;text-rendering:geometricPrecision;" y="16"><tspan>Mileage Violation</tspan></text></g><g style="" transform="translate(237,299)"><text x="5" style="font-size:11px;font-weight:bold;color:#000000;text-shadow:0 0 6px #FFFFFF, 0 0 3px #FFFFFF;fill:#000000;text-rendering:geometricPrecision;" y="16"><tspan>Passenger Seat Belt</tspan></text></g></g><g class="highcharts-legend"><g><g></g></g></g><g class="highcharts-tooltip" style="cursor:default;padding:0;pointer-events:none;white-space:nowrap;" transform="translate(281,-9999)" opacity="0" visibility="visible"><path fill="none" d="M 3.5 0.5 L 155.5 0.5 C 158.5 0.5 158.5 0.5 158.5 3.5 L 158.5 42.5 C 158.5 45.5 158.5 45.5 155.5 45.5 L 3.5 45.5 C 0.5 45.5 0.5 45.5 0.5 42.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" isShadow="true" stroke="black" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></path><path fill="none" d="M 3.5 0.5 L 155.5 0.5 C 158.5 0.5 158.5 0.5 158.5 3.5 L 158.5 42.5 C 158.5 45.5 158.5 45.5 155.5 45.5 L 3.5 45.5 C 0.5 45.5 0.5 45.5 0.5 42.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" isShadow="true" stroke="black" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></path><path fill="none" d="M 3.5 0.5 L 155.5 0.5 C 158.5 0.5 158.5 0.5 158.5 3.5 L 158.5 42.5 C 158.5 45.5 158.5 45.5 155.5 45.5 L 3.5 45.5 C 0.5 45.5 0.5 45.5 0.5 42.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" isShadow="true" stroke="black" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></path><path fill="rgba(249, 249, 249, .85)" d="M 3.5 0.5 L 155.5 0.5 C 158.5 0.5 158.5 0.5 158.5 3.5 L 158.5 42.5 C 158.5 45.5 158.5 45.5 155.5 45.5 L 3.5 45.5 C 0.5 45.5 0.5 45.5 0.5 42.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#90ed7d" stroke-width="1"></path><text x="8" style="font-size:12px;color:#333333;fill:#333333;" y="20"><tspan style="font-size: 10px">Passenger Seat Belt</tspan><tspan style="fill:#90ed7d" x="8" dy="15">●</tspan><tspan dx="0"> Delivered amount: </tspan><tspan style="font-weight:bold" dx="0">20</tspan></text></g><text x="890" text-anchor="end" style="cursor:pointer;color:#909090;font-size:9px;fill:#909090;" y="395">Highcharts.com</text></svg></div></div>

我在 css 上尝试的地方:

 .container
 {
    float:left;
    height: 400px; 
    width: 198px;
    background-color:Aqua;
 }

但这并不影响。

有什么解决办法吗？

Answer 1

如果使用position，请使用left和top改变div的位置，设置position:relative到父div。

喜欢:

 #container{
    position:absolute;
    top:30px;
    left:50px;
    width:400px;
    height:198px
 }