Блог

Главная - Вопросы по программированию - Размещение значка в углу границы div с :перед

Размещение значка в углу границы div с :перед

#html #css

Вопрос:

Заранее приношу извинения, это мой первый пост на SO, так что, если я не даю вам то, что вам нужно, я постараюсь разобраться в этом. Чтобы дать контекст: это для css файла .epub, если это поможет.

Я пытаюсь разместить изображение в верхнем углу границы нескольких определенных div s. В настоящее время я использую :before , однако, если данный div вопрос не является первым на странице, значок на самом деле не является частью границы, вместо этого он находится только в верхнем левом углу страницы.

Я сделал этот JSFiddle, чтобы продемонстрировать, чего я пытаюсь достичь, но это не совсем так. Значок находится в верхнем углу div , но это не то место, где я хочу, я хочу, чтобы он был в верхнем углу границы. Если я удалю position:absolute и position:relative от родителя, и от ребенка div , то значок переместится в верхний угол страницы.

В качестве альтернативы JSFiddle:

     .other {
      margin-top: 20px;
      margin-left: 20px;
      margin-right: 20px;
      margin-bottom: 20px;
      border: 10px solid transparent;
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 10px;
      padding-bottom: 20px;
      }
    .info {
      margin-top: 20px;
      margin-left: 20px;
      margin-right: 20px;
      margin-bottom: 20px;
      border: 10px solid transparent;
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 10px;
      padding-bottom: 20px;
      border-image: url(https://i.ibb.co/YDRL4pQ/box.png) 30% round;
      position:relative;
    }
    .info:before {
        content: '';
        height: 50px;
        width: 50px;
        position: absolute;
        top: 5px;
        left: 5px;
        background:url(https://i.ibb.co/S5zFz5r/dig-deeper.png);
        } 
 Unrelated text further up the page

<div class="other">
unrelated div further up the page
</div>

<div class="info">div with text for icon</div>

Надеюсь, я предоставил достаточно информации и контекста! Я искал на сайте похожие темы, и, похоже, это не совсем то, что я ищу, так как мой конечный код будет выглядеть так: этот. Радиус в нижнем углу был бы хорошим, но не необходимым.

Ответ №1:

Просто используйте недвижимость top и left в info:before , чтобы переместить ее через границу. См. Пример….; -)

 .other {
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    border: 10px solid transparent;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 20px;
}

.info {
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    border: 10px solid transparent;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 20px;
    border-image: url(https://i.ibb.co/YDRL4pQ/box.png) 30% round;
    position: relative;
}

.info:before {
    content: '';
    height: 50px;
    width: 50px;
    position: absolute;
    /* use this values for positioning 
    negative values move it over the border */
    top: -10px;
    left: -10px;
    background: url(https://i.ibb.co/S5zFz5r/dig-deeper.png);
} 
 <div class="other">
    unrelated div further up the page
</div>

<div class="info">div with text for icon</div>

Комментарии:

1. О боже мой. Спасибо.

Метки: