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>
I would like to have a container and set the background image for the container.
This container must be resizable when resizing the window.
Inside that container there are set of divs which have absolute positions and different z-indexes and assemble an snapshot of a car.
by re-sizing the window this bike also should re-size and stay in the center of that container.
<div class="col-lg-8 left-panel">
<div class="resizable-container">
<div class="resizable-wrapper">
<div style="position: absolute; top: 0px; width: 100%; height: 0px;">
<img src="...."/>
</div>
<div style="position: absolute; top: 0px; width: 100%; height: 0px;">
<img src="...."/>
</div>
<div style="position: absolute; top: 0px; width: 100%; height: 0px;">
<img src="...."/>
</div>
</div>
</div>
</div>
.resizable-container{
width: 100%;
min-height: 400px; (this height also should be resizable)
background: url('background.jpg');
}
.resizable-wrapper{
position: relative;
height: 100%;
/* margin: 0px auto; */
top: -59px; (I have to do this to make the image position centered)
left: -19%; (I have to do this to make the image position centered)
}
Can you guys help me please to achieve this? Do I need to write some script to set the height, top and left or I can do this purely using CSS. In both way I need your help. Thanks
here is the Jsfiddle https://jsfiddle.net/7dsggjpo/3/
I am currently having an issue with parallax scrolling. I am using a custom JavaScript solution which moves the content over the initial background image. It works totally fine, however, the initial background photo is still visible underneath the content. Here are some code snippets.
#home {
position: relative;
width: 100vw;
height: auto;
}
#home_img {
min-width: 100vw;
width: 100vw;
height:auto;
position: relative;
z-index: -1;
}
#content {
position: relative;
z-index: 1;
}
And here is my html
<section class="section"id="home">
<img id="home_img"src="images/homepagenew2.png">
<!-- <i class="fa fa-home"></i> -->
</section> <!-- End Home Div -->
<div id="content">
.....
</div>
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;
}
I'm essentially trying to create this effect:
https://squareup.com/
but I cannot figure out how to get my div to overflow to the left while it stays centered on the page when the window is resized.
Here's a Fiddle
HTML
<div class="content">
<div class="wrapper">
<h1>CONTENT</h1>
</div>
</div>
CSS
.content {
background: url(../bg-image.png) center no-repeat;
width: 100%;
height: 400px;
}
.wrapper {
width: 980px;
height: 400px;
margin: 0 auto;
}