Как выровнять мой красный элемент div в верхней части моей кнопки? - PullRequest
Новая
       0

Как выровнять мой красный элемент div в верхней части моей кнопки?

0 голосов
/ 09 апреля 2020

как мне выровнять мой красный элемент div в верхней части моей кнопки? Я пытался использовать position: absolute; top: 0;, но это просто выравнивает мой красный div по верху страницы, а не по верхней части кнопки. Первоначально я использовал изображение, а не красный div, но так как я запускаю его в фрагменте кода, я не могу использовать изображение. 

body {
    padding: 50px;
}

button {
    transition: transform 0.1s;
    cursor: pointer;
    height: 200px;
    width: 320px;
    border-style: none;
    outline-style: none;
    color: none;
}


button:hover {
    transform:scale(1.03,1.03);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    font-size: 30px;
    color: #ffffff;
    text-align: left;
}

div {
    width: 310px;
    height: 170px; 
    background: red;
    background-image: url(netflix\ black\ logo.png);
    background-size: cover;
}
<html>
    <head>
        <title>shop.shop</title>
        <link rel="stylesheet" href="shop.css">
    </head>
    <body>
        <form  action="https://netflix.com/" target="_blank">
        <button type="submit">
            <div>

            </div>
            <!---p>visit netflix and stuff </p>-->
        </button>
    </form>
    </body>
</html>

1 Ответ

1 голос
/ 09 апреля 2020

Для управления позиционированием дочерних элементов родителю присваивается свойство position. Часто элемент получает position:relative. Это позволяет позиционировать дочерний элемент абсолютно и принудительно устанавливать его в положение. 

position:absolute;
top:0;

Существуют и другие способы выполнения sh с помощью flexbox. Я часто использую эту ссылку в качестве ссылки: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

body {
    padding: 50px;
}

button {
    transition: transform 0.1s;
    cursor: pointer;
    height: 200px;
    width: 320px;
    border-style: none;
    outline-style: none;
    color: none;
    position:relative;
}


button:hover {
    transform:scale(1.03,1.03);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    font-size: 30px;
    color: #ffffff;
    text-align: left;
}

div {
    width: 310px;
    height: 170px; 
    background: red;
    background-image: url(netflix\ black\ logo.png);
    background-size: cover;
    position:absolute;
    top:0;
}
<html>
    <head>
        <title>shop.shop</title>
        <link rel="stylesheet" href="shop.css">
    </head>
    <body>
        <form  action="https://netflix.com/" target="_blank">
        <button type="submit">
            <div>

            </div>
            <!---p>visit netflix and stuff </p>-->
        </button>
    </form>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...