Develop Reference

Is it possible to set the css position property independantly for vertical and horizontal axes?

Say I wanted an element to be positioned vertically absolutely, but horizontally relative. Is this possible with css/html/javascript?

Not sure which case could be fine to use this mix, but it is possible,
if you only define top/bottom properties in a position:absolute element.
The left/right position of the element will be "relative" if you leave it untouched.
In the following example, the second container has a mixed positioning.
.example{
margin: 30px;
position: relative;
border: 1px solid red;
}
.item1, .item2{
display: inline-block;
margin: 0;
}
#example2 .item2{
position: absolute;
top: 80px;
}
<div id="example1" class="example">
<div class="item1">Item1</div>
<div class="item2">Item2</div>
</div>
<div id="example2" class="example">
<div class="item1">Item1</div>
<div class="item2">Item2</div>
</div>

How to have dynamic overlays over images in angular 2?

How to have an image in angular 2 like the one above, taken from facebook marketplace. The one I need is the black on, bottom-left.

Create a wrapper div around the image that has a position set to relative, and then create the overlay as a child div, with position set to absolute.
That will position it relative to the container
Here is an example:
.img-container {
position: relative;
}
img {
width: 500px;
}
.overlay {
display: inline-block;
color: white;
background-color: rgba(0,0,0,0.8);
padding: 10px;
border-radius: 10%;
position: absolute;
bottom: 20px;
left: 20px;
}
<div class="img-container">
<img src="http://greenwoodhypno.co.uk/wp-content/uploads/2014/09/test-image.png" />
<div class="overlay">
$75
</div>
</div>

Show div relative to it's parent top position

I have several divs which have absolute positioned sidebars that show at their right when hovered.
I want each sidebar to show at 100px from the top from it's parent top position when hovered.
HTML
<div class="guide-container">
THIS IS THE PARENT DIV
<aside class="guide-extras">
THIS IS THE SIDEBAR
</aside>
</div>
Jquery
$( ".guide-container" ).hover(function() {
var container = $( this ).find("aside").toggle();
var height = $( this ).find("aside").position().top
$( this ).find("aside").css("top", height);
});

Why JavaScript? You can do it with plain CSS:
.guide-container {
position: relative;
border: 1px solid #f00;
margin: 10px 0;
height: 70px;
width: 50%;
}
.guide-extras {
position: absolute;
top: 20px;
right: -210px;
width: 200px;
border: 1px dashed #00f;
display: none;
}
.guide-container:hover .guide-extras {
display: block;
}
<div class="guide-container">
THIS IS THE PARENT DIV
<aside class="guide-extras">
THIS IS THE SIDEBAR
</aside>
</div>
<div class="guide-container">
THIS IS THE PARENT DIV
<aside class="guide-extras">
THIS IS THE SIDEBAR
</aside>
</div>

You can do this using only CSS:
.guide-extras {
float: right;
display: none;
}
.guide-container:hover > .guide-extras {
display: block;
position: relative;
top: 100px;
}
<div class="guide-container">
THIS IS THE PARENT DIV
<aside class="guide-extras">
THIS IS THE SIDEBAR
</aside>
</div>
<br/><br/><br/><br/>
<div class="guide-container">
THIS IS THE PARENT DIV
<aside class="guide-extras">
THIS IS THE SIDEBAR
</aside>
</div>
JSFiddle

Try simply adding margin-top: 100px; to the .guide-extras CSS class.

How to prevent cutting off absolute positioned elements and still keep a box-shadow embrace the parent div?

First of all an example:
https://jsfiddle.net/85uqehz5/
The code is just an example, an easier version of my real code. I figured out that I cant't have both: Setting the wrap-div to overflow: visible the menu that shows up isn't cut off but the box shadow doesn't embrace the box; With overflow:auto; the box-shadow is working but the menu cut off. How could I solve this? A fixed height would not be an option.
Example Code:
$('#menu').click(function() {
$('#menu-list').toggleClass('hidden');
});
#wrap {
width: 80%;
height: auto;
overflow: visible;
box-shadow: 0 0 .2rem rgba(0, 0, 0, .4);
}
#content {
width: 200px;
height: 20px;
margin: 0 auto;
}
#content2 {
float: left;
}
.hidden {
display: none;
}
#menu {
position: relative;
height: 20px;
width: 100px;
background-color: #ccc;
float: left;
}
#menu-list {
position: absolute;
top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrap">
<div id="content">
Some Content
</div>
<div id="content2">
Some Content
</div>
<div id="menu">
Open Menu
<div id="menu-list" class="hidden">
<div> bla </div>
<div> bla </div>
<div> bla </div>
</div>
</div>
</div>

It's very simple, in your specific case:
1- Remove overflow: auto; from #wrap
2- Add this to your CSS:
#wrap:after {
display: table;
content: "";
clear: both;
}
This makes the height of #wrap's calculation include the floated element.
If you have multiple uses declare a class like clearfix and use it whenever needed.
Demo: https://jsfiddle.net/85uqehz5/1/

Floats must be cleared: https://jsfiddle.net/85uqehz5/3/
<div id="wrap" class="clearfix">
The reason the menu is cut off is because you haven't clear your float: left and that is done with such piece of code to the container
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

div always on top of fixed element

what I'm trying to do is simple to tell. There is fixed div on my page on bottom. It must be always shown on bottom, so position fixed is used.
In this div there are 2divs, one small must be always on top of this fixed div, another must be scrollable.
The problem is small div, if I give him position fixed, it is position to top of window, not on top of this fixed div, as you can see in this fiddle
If small div is position absolute, it is on top of fixed div, but if it is scrolled, as you can see in this fiddle
HTML
<div class="bottom">
<div class="top"></div>
<div class="content"></div>
</div>
CSS
.bottom
{
padding:20px;
height: 253px;
position: fixed;
bottom:0px;
width:100%;
background-color: red;
overflow-x: hidden;
overflow-y: scroll;
}
.top
{
height:50px;
width:100%;
background-color: yellow;
position: fixed;
top: 0px;
}
.content
{
height: 1500px;
background: linear-gradient(green, blue);
}
Is is possible to make this work without watching scrolling by jvascript? By pure CSS?

You can use a wrapper <div> for the content and let it scroll - so that the absolutely positioned sibling does not scroll along with it, as follows:
HTML
<div class="bottom">
<div class="top"></div>
<div class='contentWrap'>
<div class="content"></div>
</div>
</div>
CSS
.contentWrap{
height:100%;
overflow-y:auto;
}
* {
margin: 0;
padding: 0;
}
.bottom {
padding: 20px;
height: 253px;
position: fixed;
bottom: 0px;
width: 100%;
background-color: red;
overflow: hidden;
}
.top {
height: 50px;
width: 100%;
background-color: yellow;
position: absolute;
top: 0px;
}
.contentWrap {
height: 100%;
padding-top: 30px; /* .top height - .bottom padding*/
overflow-y: auto;
}
.content {
height: 1500px;
background: linear-gradient(green, blue);
}
<div class="bottom">
<div class="top"></div>
<div class='contentWrap'>
<div class="content"></div>
</div>
</div>
JSFiddle Demo

Your approach using fixed -> absolute is absolutely correct since you can position an element absolute but relative to its parent by doing so. The problem is that the absolute .top always appears on top of .bottom - so if .bottom is scrolled, .top will follow.
My solution would be using position:fixed; on .top, but using bottom instead of top:
.top {
....
position:fixed;
bottom:253px; /*note sure how it should look at the end, try it yourself*/
}

Add div with class top inside div with class content and remove top:0 from .top class:
html
<div class="bottom">
<div class="content" >
<div class="top"></div>
</div>
<div>
css
.top
{
height:50px;
width:100%;
background-color: yellow;
position: fixed;
}
fiddle

Try this, it basically just puts a frame container around your scrollable div to keep everything in place. JSFiddle
<div class="bottom">
<div class="top"></div>
<div class="scroll-container">
<div class="content" ></div>
</div>
<div>
.scroll-container
{
height: 203px;
overflow-y: scroll;
}
Also, remove overflow-y: scroll; from the .bottom class

If you already dealing with fixed heights & positions, why not just position the 'top' section as fixed as well? check the Fiddle Demo
like so:
.top
{
height:50px;
bottom:243px;
width:100%;
background-color: yellow;
position: fixed;
}