Question

我是html和CSS的新手。我正在尝试在网页上移动项目。网页现在是这样的：

我在此网页上有以下代码：

index.php：

<body>
    <div class="wrapper">
        <h2 id="loginText" style="top:383px" >Login</h2>
        <p id="credentialsText">Please fill in your credentials to login </p>
        <form id="formOverall" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
            <div class="form-group <?php echo (!empty($username_err)) ? 'has-error' : ''; ?>">
                <label>Username</label>
                <input type="text" name="username"class="form-control" value="<?php echo $username; ?>">
                <span class="help-block"><?php echo $username_err; ?></span>
            </div>    
            <div class="form-group <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>">
                <label>Password</label>
                <input type="password" name="password" class="form-control">
                <span class="help-block"><?php echo $password_err; ?></span>
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-primary" value="Login">
            </div>
            <p>Don't have an account? <a href="register.php">Sign up now</a>.</p>
       </form>
    </div> 
</body>

但是，所有文本仍显示在页面的左上方。我希望显示“登录”的文本显示在页面的下方。这就是为什么我设置样式：“顶部：383px”。但是，此文本不会从原来的位置移开。无论我在样式属性中设置了什么，此文本怎么都不会移动？

Answer 1

top仅适用于某些position值。改用边距，像这样：

<h2 id="loginText" style="margin-top:383px" >Login</h2>

这应该可以满足您的需求。您也可以使用margin-left等将其向右移动。

如果您想使用top，则可以执行以下操作：

<h2 id="loginText" style="position: absolute; top:383px" >Login</h2>

绝对定位使您可以使用top，left，right和bottom来绝对定位页面上的元素

您可以详细了解position属性here和top属性here

Answer 2

没有CSS，很难说出问题出在哪里，但是我的猜测是您尚未为元素声明位置属性，这意味着它默认为position: static，这意味着它不会移动。因此，如果要移动项目，则需要声明position: relative，然后应用top: 383px。话虽如此，仅设置margin-top: 383px更为常见。同样，如果您添加了正在使用的CSS副本，则可以更轻松地解决该问题。

Answer 3

您登录表单的最佳位置是在<div>中填充表单。比起您可以使用样式margin: 0 auto;来设置屏幕的div中心（水平）并进行垂直对齐，您可以使用一些js或margin-top:，但要使用％...（不要忘记将其缩小屏幕比您拥有的要多）

Answer 4

确保定义位置类型。

<h2 id="loginText" style="top:383px; position:fixed" >Login</h2>

fixed表示位置（top：383px）相对于窗口。还有其他位置类型，例如绝对位置，相对位置或粘性位置。

Answer 5

使用<div class="container m-5">可以让您从顶部获得一些利润，并为您创建一个容器

更改html元素的位置？

5 个答案: