Position buttons above bottom

Question

I'm trying to position the two white buttons just slightly (~10px) from the bottom, while staying responsive (ie changing the height of the viewport retains button position relative to bottom of div). I've tried the flexbox answer, and absolute/relative positioning, but in vain. Here are the divs in question:

.item2{
    background-color:#EF5350;
    width:50%;
    padding-left:5%;
    padding-right:5%;
    padding-top:5%;
    box-sizing: border-box;    
    position:relative;
    transition: 0.3s ease all;
}

.slick-prev:before, .slick-next:before{
  color: whitesmoke;
    font-size: 60px;
  margin-top: auto;
    align-self: flex-end;
    transition: 0.3s ease all;  
}

Link to full code: https://codepen.io/Refath/pen/drMrYW?editors=0100

Andy Hoffman · Accepted Answer · 2019-03-03T19:46:25.787

2

I first needed to override the relative container housing the arrows. This container's natural boundaries prevented the absolutely positioned arrows from being pinned to the bottom of the viewport. I made the container static and then positioned the buttons near the bottom of the next highest relatively positioned parent.

.slick-carousel {
  position: static;
}

.slick-prev,
.slick-next {
  transform: none;
  top: inherit;
  bottom: 50px;
}

.slick-prev {
  left: 0;
}

.slick-next {
  right: 40px;
}

CodePen

edited Mar 03 '19 at 19:46

answered Mar 03 '19 at 09:11

Andy Hoffman

18,436
4
42
61

This is awesome, but trying to understand; Let me know if I have any misunderstandings; You used `top:inherit;` so that the vertical position of the buttons is the same as that of the viewport. But why did you use `position:static`? I thought top/bottom/left/right can't be applied to position: static. Also, what's the point of the `transform:none`? Thanks – DarkRunner Mar 04 '19 at 00:28
@BigCoder101 [1] Slick sets a bunch of default styles which we need to override to make this work. For the arrows, I used `top: inherit` to remove the default style already being applied, `top: 50%`. I set `transform: none` to override the default `transform` styles set by Slick. – Andy Hoffman Mar 04 '19 at 00:34
@BigCoder101 [2] The immediate parent div containing the arrows was set to `position: relative` This fenced in the arrows, meaning that `bottom: 50px` posoitioned the arrows to the bottom *of the parent*. Since we needed the arrows to stay at the bottom of the surrounding box, I removed the `relative` position of the immediate parent, meaning the arrows looked to the next parent for a container to position themselves. That next parent gave us the flexibility we needed. – Andy Hoffman Mar 04 '19 at 00:37

score 0 · Answer 2 · answered Mar 03 '19 at 09:08

0

.item2 {
    display: flex;
    align-items: flex-end;
}

this helps but what you're doing with css creating pseudo elements might be a problem, that's not the best way to do what you want

answered Mar 03 '19 at 09:08

TheDev

407
2
12

Position buttons above bottom

2 Answers2