Question

当我更改left，top，right的值时，什么也没发生。它停留在同一个地方。我也尝试更改position属性但没有发生任何事情。

我做错了什么？

.PHP_A {
  position: static;
  left: 200px;
  top: 400px;
  right: 200px;
  z-index: 1;
  background: #ccccff;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

<div class="PHP_A">
  <form action="#" method="post">
    Course Name:PHP_A</br>
    </br>
    Course Duration:100 HOURS</br>
    </br>
    CourseFees:$1000</br>
    </br>
    </br>
    </br>
    <input type="submit" name="submit" value="APPLY" />
  </form>
</div>
</br>
</br>

Answer 1

您希望将位置static更改为absolute位置，甚至可以根据您的使用情况更改fixed。

https://www.w3schools.com/cssref/pr_class_position.asp

静态：默认值。元素按顺序呈现，因为它们出现在文档流程
中
绝对：元素相对于其第一个定位（非静态）祖先元素定位

已修复：该元素相对于浏览器窗口定位

<style>
.PHP_A
{
  position: absolute;
  left: 200px;
  top: 400px;
  right: 200px;
  z-index: 1;
  background: #ccccff;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;   
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
</style>
<div class="PHP_A">
  <form action="#" method="post">
    Course Name: PHP_A </br></br>
    Course Duration: 100 HOURS </br></br>
    CourseFees: $1000 </br></br>
    </br></br> 
    <input type="submit" name="submit" value="APPLY" />
  </form>
</div>

Answer 2

代码“ position：static ;”的部分问题是它使你的div在文档流程的预定义结构css中对齐，而你应该使用“ position：relative ”我已经修改了你的css了一下你现在可以给出任何值向左或向右看结果

<style>
.PHP_A
{
  position:absolute;
  left: 10%;
  top: 40px;
  right: 200px;
  z-index: 1;
  background: #ccccff;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;   
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
</style>

表单未按预期响应CSS

2 个答案: