CODEWITHSUNDEEP
cssflexboxbulma
user9644796
user9644796

Reputation:

button top right of image

Using Bulma framework, I'm trying to put a button at the top right of the image, but it's only showing at the bottom of the image. I tried to use justify-content and flex, but the button is still at the bottom

.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>

Upvotes: 1

Views: 2731

Answers (2)

user9687633
user9687633

Reputation:

You need to place the button inside the figure tag and give it css property "position: absolute".

It could look something like this:

<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>

Of course, external css style in a class is preferable.

Upvotes: 1

Dexter0015
Dexter0015

Reputation: 1039

I don't know the Bulma framework so maybe there is a way to achieve it using framework's classes, I let you search in the framework documentation.

But here is a working exemple to explain you the idea:

You need to use the z-index CSS property whitch allow you to specify the level of an element regarding an other element (superposition).

For this to works, each elements need to have a position to (z-index needs it).

So I wrapp the two elements (the figure and the button) inside a "container" with a "relative" position (more info about CSS position).

Then I had a position relative to the figure too (because it wont move, I just need it to set the z-index), and a z-index to 1.

Finally, the button get the "absolute" position (relative the closest wrapping element with a position: in our exemple it will be the "container", that's his purpose), and a z-index of 3 (greater than the image to it will be display on to p of it). When just set the position on top/right and voilà!

Important note: I HAD to add the !important marker to force my parameters other the ones set by the framework in order to make it works as intended (This is just for the exemple, I strongly encourage you to search if the documentation offer an alternative). Or maybe someone who actually know the framework can add answer you too.

Anyway I believe understanding how CSS works can't hurt. 

.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>

Upvotes: 0

Related Questions