html - 在 HTML 和 CSS 代码中定位元素

Question

我正在尝试定位如下图的表单(<div> 标签前的前两个<script> 是这两个元素的相关代码:

这是 HTML本页代码:

<div id="chart_container" #chart_container style="margin-left: 10px;">
  <!-- <pan-zoom [config]="panzoomConfig"> -->
  <div class="flowchart-example-container" id="exampleDiv" #exampleDiv></div>
  <!-- </pan-zoom> -->
</div>

<div class="form-popup" id="myForm">
  <form action="/action_page.php" class="form-container">
    <h1>Login</h1>

    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit" class="btn">Login</button>
    <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
  </form>
</div>


<script>
  function openForm() {
    document.getElementById("myForm").style.display = "block";
  }

  function closeForm() {
    document.getElementById("myForm").style.display = "none";
  }
</script>

<input type="button" value="delete" (click)="deleteOperationOrLink()" style="margin-left:20px;">
<input type="button" value="load" (click)="load()">
<input type="button" value="get" (click)="get()">

<br>
<div class="disp">
  <textarea nbInput shape="round" name="diagModel" [(ngModel)]="diagModel" placeholder="model" style="height: 300px; width: 500px; margin-left: 20px;"></textarea>

  <div class="palette">
    <button md-button class="input_circle_icon" (click)="addNewOperator3()">ورودی</button>
    <button md-button class="output_circle_icon" (click)="addNewOperator4()">خروجی</button>
    <button md-button class="myTest_icon" (click)="addNewOperator()">عملگر یک</button>
    <button md-button class="myTest2_icon" (click)="addNewOperator2()"> عملگر دو</button>
  </div>
</div>

我不知道怎么把表格放在页面的右上角。

Answer 1

有很多方法可以做到:

1°方式——你可以给你的id“myForm”一个“position:absolute”:示例:

#myForm {
    position: absolute;
    right:0;
    top: 0;
}

2°方式 - 给每个 div 一个“宽度”和“显示:内联 block ”:(对于这个例子，你应该创建一个带有“width:100%”的外部 div)示例:

#externalDiv {
   width:100%;
   float:left;
} 
#myForm {
    width: 40%;
    display: inline-block;
}

#chart_container {
    width: 60%;
    display: inline-block;
}