кнопка в правом верхнем углу изображения - PullRequest
Новая
       49

кнопка в правом верхнем углу изображения

0 голосов
/ 31 мая 2018

Используя Bulma Framework, я пытаюсь поместить кнопку в верхнем правом углу изображения, но она отображается только в нижней части изображения.Я пытался использовать justify-content и flex, но кнопка все еще находится внизу 

.justify-content-start {
  align-self: flex-start;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />

<figure class="image is-128x128">
  <img src="https://bulma.io/images/placeholders/256x256.png">
</figure>
<a class="delete is-medium justify-content-start" style="display:flex-row;"></a>

Ответы [ 2 ]

0 голосов
/ 31 мая 2018

Вам нужно поместить кнопку внутри тега figure и присвоить ей свойство css "position: absolute ".

Это может выглядеть примерно так: 

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />

<figure class="image is-128x128">
  <img src="https://bulma.io/images/placeholders/256x256.png">
  <a class="delete is-medium" style="position: absolute; top: 0; right: 0;"></a>
</figure>

Конечно, внешний стиль CSS в классе предпочтительнее.

0 голосов
/ 31 мая 2018

Я не знаю фреймворк Bulma, поэтому, возможно, есть способ добиться этого с помощью классов фреймворка, я позволю вам поискать в документации фреймворка.

Но вот рабочий пример, чтобы объяснить вам идею:

Вам необходимо использовать свойство CSS z-index, которое позволяет указать уровень элемента относительно другого элемента (суперпозиция).

Чтобы это работало, каждый элемент должениметь position к (это нужно z-index).

Поэтому я обертываю два элемента (рисунок и кнопку) внутри «контейнера» с «относительной» позицией ( подробнеео позиции CSS ).

Тогда у меня тоже была позиция относительно фигуры (потому что она не будет двигаться, мне просто нужно установить z-индекс), и z-индекс равен 1.

Наконец, кнопка получает «абсолютную» позицию (относительно ближайшего элемента обертывания с позицией: в нашем примере это будет «контейнер», это его цель) и z-index = 3 (больше изображения к нему будет отображатьсялежи на р этого).Когда просто установите положение сверху / справа и вуаля!

Важное примечание: Я ДОЛЖЕН добавить маркер !important, чтобы заставить мои параметры другие, которые установлены каркасом для того, чтобызаставить его работать как задумано (это только для примера, я настоятельно рекомендую вам поискать, если документация предлагает альтернативу).Или, может быть, кто-то, кто на самом деле знает фреймворк, может добавить вам ответ.

В любом случае, я верю, что понимание того, как работает CSS, не повредит.

.container {
  position: relative;
  width: 128px;
}

.back-element {
  position: relative;
  z-index: 1;
}

.front-element {
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  z-index: 3 !important;
  background-color: red !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />

<div class="container">
  <figure class="image is-128x128 back-element">
    <img src="https://bulma.io/images/placeholders/256x256.png">
  </figure>
  <a class="delete is-medium front-element"></a>
</div>
...