Fix arrow(img) prev and next

Question

<div>
   header
</div>
<div>
   sidebar
</div>
<div>
   content

   <a href="#"><img src="prev.png"></a>
   <a href="#"><img src="next.png"></a>

</div>

how do I fix the arrow in the center of the div content to the right and left?

http://jsfiddle.net/shvj40ta/embedded/result/

SOLUTION

The question below helped me understand about override:

How to override "inherited" z-indexes?

I put the z-index in div arrows, not in children divs

With the help of user @justinas I got the solution

http://jsfiddle.net/gislef/3by7r0ek/1/

Your divs dont even have a size. You need to work on this before of asking for help. — L777, Feb 29 '16 at 07:01
@DhavalPatel please see: jsfiddle.net/shvj40ta/embedded/result — Gislef, Feb 29 '16 at 08:20
:( my account was blocked to questions, I really struggled to make clear questions and learn how to program better with you — Gislef, Mar 04 '16 at 01:52

score 1 · Accepted Answer · answered Feb 29 '16 at 06:56

1

With css 'position: absolute; top: 50%; margin-top: -(height / 2)';

.wrapper {
  background-color: rgba(0, 0, 0, .2);
  position: relative;
  margin: 10px auto;
  height: 200px;
  width: 300px;
}
.left,
.right {
  width: 0;
  height: 0;
  border: 20px solid transparent;
  position: absolute;
  top: 50%;
  /* actual height is 40 */
  margin-top: -20px;
}
.left {
  border-right-color: black;
  left: 5px;
}
.right {
  border-left-color: black;
  right: 5px;
}

<div class="wrapper">
  <div class="left"></div>
  <div class="right"></div>
</div>

answered Feb 29 '16 at 06:56

Justinas

41,402
5
66
96

Thanks @Justinas, it code is functional but arrow are not within the content div , the left arrow appears in the sidebar div – Gislef Feb 29 '16 at 07:14
@Gislef Does your content wrapper has `position: relative` applied? If not, absolute positioned elements will take it's position from closest non-static positioned element (so `relative` or `absolute` parent, by default it's `html`) – Justinas Feb 29 '16 at 07:42
please see: http://jsfiddle.net/shvj40ta/embedded/result/ I want the arrows are only within the contents of the div – Gislef Feb 29 '16 at 08:06
@Gislef Arrows must be `absolute`, to `fixed` – Justinas Feb 29 '16 at 08:22
http://jsfiddle.net/gislef/shvj40ta/1/embedded/result/ I'm trying to get fixed inside the div content, the left arrow this correctly positioned but the right arrow does not – Gislef Feb 29 '16 at 08:45
but that arrow is above the content, in my example it floating arrows are on the screen and hinders not read the contents, but inside the div content, the only problem is the right arrow – Gislef Feb 29 '16 at 16:21
Thank you @justinas with your help I finally got. http://jsfiddle.net/gislef/3by7r0ek/1/ – Gislef Mar 01 '16 at 03:31

Fix arrow(img) prev and next

1 Answers1