Question

body {
    background-image: url("https://wallpapertag.com/wallpaper/full/8/5/a/157291-vertical-minecraft-shaders-background-1920x1080-ios.jpg");
}
.title {
    font-size:50px;
    font-family: 'Raleway', sans-serif;
    position: absolute;
    color: white;
    left: 790px;
}
.title {
    position: relative;
}
.text {
    color: white;
    font-family: 'Work Sans', sans-serif;
    font-size: 30px;
    line-height: 10px;
}
.nfa {
    width: 250px;
    border: 1px solid white;
    padding: 75px;
    margin: 10px;
    margin-left:100px;
    margin-top: 65px;
    background-color:black|50%;
}
.sfa {
    width: 250px;
    border: 1px solid white;
    padding: 75px;
    margin: 10px;
    margin-left:100px;
    margin-top: 65px;
    background-color:black;
}
.of {
    width: 250px;
    border: 1px solid white;
    padding: 75px;
    margin: 10px;
    margin-left:750px;
    margin-bottom: 500px;
    background-color:black;
    position: absolute;
}
.text-desc {
    color:white;
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
}
.buttonnfa {
    background-color: #09ebf7;
    border: none;
    color: white;
    padding: 10px 100px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-top:15px;
    font-family: 'Work Sans', sans-serif;
}
.buttonsfa {
    background-color: #09ebf7;
    border: none;
    color: white;
    padding: 10px 100px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-top:15px;
    font-family: 'Work Sans', sans-serif;
}
.buttonof {
    background-color: #09ebf7;
    border: none;
    color: white;
    padding: 10px 100px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-top:15px;
    font-family: 'Work Sans', sans-serif;
}
.buttonnfa:hover{
    background-color:#05a2aa;
}
.buttonsfa:hover{
    background-color:#05a2aa;
}
.buttonof:hover{
    background-color:#05a2aa;
}

<!doctype html>
<html>
    <head>
        <title> SpeedyAlts </title>
        <link rel="stylesheet" href="css/style.css">
        <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
    </head>
    <body>
        <div class='bg'>
            <a class="title"> SpeedyAlts </a>
            <div class="nfa">
                <center>
                    <a class="text"> NFA Account </a>
                    <br>
                    <br>
                    <a class="text-desc"> Minecraft accounts with security questions which you can use to log in and play on. </a>
                </center>
                <a class="buttonnfa" data-selly-product="a0f2e42d"> Purchase </a>
            </div>

            <div class="sfa">
                <center>
                    <a class="text"> SFA Account </a>
                    <br>
                    <br>
                    <a class="text-desc"> A Minecraft account without security questions with the ability to change username, skin and password. </a>
                </center>
                <a class="buttonsfa" data-selly-product="a0f2e42d"> Purchase </a>
            </div>

            <div class="of">
                <center>
                    <a class="text"> Optifine Cape </a>
                    <br>
                    <br>
                    <a class="text-desc"> A Minecraft account without security questions with the ability to change username, skin and password. </a>
                </center>
                <a class="buttonof" data-selly-product="a0f2e42d"> Purchase </a>
            </div>

        </div>
        <script src="https://embed.selly.gg"></script>
    </body>
</html>

我不知道它为什么不起作用。由于某种原因，保证金最高保证金 - 左边等。它没有向上移动也没有向下移动任何边距。有人可以帮忙吗？我不擅长HTML，也不擅长CSS，所以如果有任何代码，那么格式错误。此外，如果有人能够在将来给我提出任何有关此类问题的建议，那将会有所帮助。感谢。

Answer 1

您的div有问题position:absolute。您需要将其删除，或使用top和bottom，left和right在页面上移动它。在您的示例中，如果您想在页面上移动元素，则需要声明：

.of {
    width: 250px;
    border: 1px solid white;
    padding: 75px;
    margin: 10px;
    background-color:black;
    position: absolute;
    left:750px;
    bottom: 500px;
}

请记住，这意味着您的元素将始终从底部500px，从左侧750px。最好使用百分比值。

Answer 2

要将其向上移动，您可以尝试使用其中一个到课程.of：

保证金方法

margin-top:-50px;

绝对定位方法

top: 300px; //change this value as needed

转换方法

transform:translateY(-50px);

不能让我的边界定位

2 个答案: