This question already has answers here:
Why position:sticky is not working when the element is wrapped inside another one?
(1 answer)
Why bottom:0 doesn't work with position:sticky?
(2 answers)
Closed 2 years ago.
I am trying to make a div element sticky on my page. When I use position sticky (and yes, it is inside of a parent element), not only is it not sticky, but I can't position it's top value. The left and right work, but not top or bottom. As the user scrolls down the page I want the div to be visible in it's entirety nearly all the way down. Can I achieve this in CSS? Here is some code:
<main class="main-area">
<header class="header">
<div class="header__logo-area">
<img src="/src/assets/svg/logo.svg" alt="ImmediaDent logo">
</div>
<div class="header__green-plus">
<img src="/src/assets/svg/plus large.svg" alt="Large Green Plus" class="header--green-plus">
</div>
</header>
</main>
<div class="form">
<div class="form__form-section">
This is where the text goes.
</div>
</div>
<section class="next">
</section>
.form {
position: relative;
&__form-section {
position: sticky;
background-color:$colorFormGray;
bottom: 10rem;
top: 10rem;
left:45rem;
height: 40.9375rem + 18.3125rem;
width: 38.5964912%;
border-radius: 20px;
text-align: center;
}
Please let me know if any more code or information is needed. Thank you!
Related
This question already has answers here:
How to overlay images
(11 answers)
Closed 3 years ago.
Hello i want create photo like this image
I want this logo to be in the upper right corner and in the person's photo
this is my code
<div style='position:relative'>
<img src='https://i.ibb.co/gFsCTmf/orang.jpg'>
<img src='https://i.ibb.co/hLB6zMr/logo.png' style='position:absoulute;top:-10px;right:0px'>
</div>
and this is my jsfiddle im try add position absolute in logo image and div position relative doesn't work. Help me thank's
your absolute spelling is wrong and need specific the width of image div.
<div style='position:relative;width: 252px;'>
<img src='https://i.ibb.co/gFsCTmf/orang.jpg'>
<img src='https://i.ibb.co/hLB6zMr/logo.png' style='display:block;position:absolute;top:0;right:0;'>
</div>
and it works on JSFiddle, if the position is not right please change the top and left codes.
.logo {
width: 19%;
position: absolute;
top: 11%;
left: 57.5%;
transform: translate(-50%, -50%);
}
<img src='https://i.ibb.co/gFsCTmf/orang.jpg'>
<img src='https://i.ibb.co/hLB6zMr/logo.png' class="logo">
<div style="position:relative;width: 247px;">
<img src="https://i.ibb.co/gFsCTmf/orang.jpg">
<img src="https://i.ibb.co/hLB6zMr/logo.png" style="position:absolute;top:
-5px;right: -5px;">
</div>
This question already has answers here:
How do nested vertical margin collapses work?
(3 answers)
Closed 5 years ago.
I am making the footer of my WP custom theme. I have footer div(inside which I place components). I also have a logo div(where my logo is). I need distance from 12px between the begening of the footer div till the logo div.
I am using this:
<div class="footer">
<div class="footerlogo">
<img id="pic" src="<?php bloginfo('template_url') ?>/img/footer_logo.png">
</div> .......
.footerlogo{ margin-top:30px;}
It doesnt show any differance. WHat is the proper way of doing that?
enter image description here
You could use padding on the footer div, for example:
.footer {
padding-top: 12px;
}
This would add space between both the .footer and .footerlogo div elements.
https://jsfiddle.net/ss7Lp2nd/
This question already has answers here:
Vertically aligning an image to the bottom inside a bootstrap “column”?
(1 answer)
How can I make Bootstrap columns all the same height?
(34 answers)
Closed 5 years ago.
I'm using Bootstrap and trying to position these 3 images at the bottom without any success. Could you help?
JSFIDDEL
HTML:
<div class="row">
<div class="col-xs-2">
<img src="https://s10.postimg.org/730mt4y5l/image.jpg" class="img-responsive first">
</div>
<div class="col-xs-8">
<img src="https://s10.postimg.org/yp3edthih/image.jpg" class="img-responsive second">
</div>
<div class="col-xs-2">
<img src="https://s10.postimg.org/z4j9kkstl/image.jpg" class="img-responsive third">
</div>
</div>
CSS:
.row {
border-bottom: 1px solid red;
position: relative;
}
.first {
}
.second {
}
.third {
}
The 3 images are of different dimensions. I would like to position them in such a way that all the images seat on the red border line.
For now, I only see to regulate with margin_top or padding_top, and responsive regulate with media switch.
style='margin_top:150px;'
This question already has answers here:
CSS - how to overflow from div to full width of screen
(3 answers)
Closed 7 years ago.
I need to put a background image in the middle of a page like this below.
A way would be to close the div container and put it back after my image. But I don't think that's the best way, so here I come to find some help.
My HTML :
<div class="container">
<div class="job">
<h4>Disc Jockey</h4>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<p>
Lorem ipsum...
</p>
</div>
</div>
</div>
</div>
And in my css :
.job{
margin-top: 75px;
background:url(../img/bg-about.jpg) no-repeat center top scroll;
background-size: 100% auto;
height: 357px;
width: 1920px;
}
Thanks in advance.
Try to add class .job to <div class='container job'></div> I think it must help you
This question already has answers here:
Problem with CSS Sticky Footer implementation
(5 answers)
Closed 8 years ago.
I know that there are tons of answer out there. I spent many many hours trying to figure out what it not working.
I want to have a sticky footer.
the html structure is like this
<body>
<div id=container>
<div id=header>
</div>
<div id=body>
<div id=left>
</div>
<div id=center>
</div>
<div id=right>
</div>
</div>
<div id=footer>
</div>
</div>
</body>
and a link with the css and the content link
Change your footer position from "absolute" to "fixed"
If you want to have the footer always be at the bottom of the screen/window you can add the following to your css
#footer {
position: fixed;
bottom: 0;
}