This question already has an answer here:
Why position:sticky is not working when the element is wrapped inside another one?
(1 answer)
Closed 1 year ago.
I want to make the image caption stick to the top of the viewport once a user scrolls the page, but it's not working. I would greatly appreciate the help, here is my HTML and CSS code:
<div id="img-div">
<img src="https://static.stacker.com/s3fs-public/styles/sar_screen_maximum_large/s3/Audrey%20Lead.png" id="image">
<p id="img-caption"><strong>For beautiful eyes, look for the good in others; for beautiful lips, speak only words of kindness; and for poise, walk with the knowledge that you are never alone.<br><br>-Audrey Hepburn</strong></p>
</div>
html{
width: 100vw;
}
body{
width: 100%;
margin: auto;
}
h1{
position: absolute;
z-index: 5;
}
#img-div{
position: relative;
height: 778px;
width: 100%;
}
#image{
background-repeat: no-repeat;
height: 774px;
width: 100%;
object-fit: cover;
}
#img-caption{
position: sticky;
font-size: 19px;
height: 9.5em;
width: 21em;
padding: 23px 13px 20px 23px;
margin: 0;
background-color: white;
opacity: 70%;
top: 0px;
z-index: 5;
}
The problem is that the stickiness position occurs in the given code in relation to the containing element, not in relation to the viewport.
This snippet takes the caption out of that element and then it sticks to the top of the viewport. (Note, to make things scrollable body has been given height 500vh for this demo).
html {
width: 100vw;
}
body {
width: 100%;
margin: auto;
height: 500vh;
}
h1 {
position: absolute;
z-index: 5;
}
#img-div {
position: relative;
height: 778px;
width: 100%;
}
#image {
background-repeat: no-repeat;
height: 774px;
width: 100%;
object-fit: cover;
}
#img-caption {
position: sticky;
font-size: 19px;
height: 9.5em;
width: 21em;
padding: 23px 13px 20px 23px;
margin: 0;
background-color: white;
opacity: 70%;
top: 0px;
z-index: 5;
}
<div id="img-div">
<img src="https://static.stacker.com/s3fs-public/styles/sar_screen_maximum_large/s3/Audrey%20Lead.png" id="image">
</div>
<p id="img-caption"><strong>For beautiful eyes, look for the good in others; for beautiful lips, speak only words of kindness; and for poise, walk with the knowledge that you are never alone.<br><br>-Audrey Hepburn</strong></p>
Related
I have an image and i want to put 2 circles on top of it, instead of the eyes.
body {
background-color: lightgrey;
color: #fff;
padding: 0;
margin: 0;
}
main {
display: grid;
place-items: center;
position: relative;
}
#container {
min-height: 100vw;
min-width: 100vw;
background: none;
aspect-ratio: 1 / 1;
}
.eye-container {
position: relative;
border-radius: 50%;
background-color: red;
width: 12vw;
height: 12vw;
}
.eye-container.left {
top: -84%;
left: 36%;
}
.eye-container.right {
top: -96%;
left: 51%;
}
.eye {
position: absolute;
bottom: 3px;
right: 2px;
display: block;
width: 3vw;
height: 3vw;
border-radius: 50%;
background-color: #000;
}
img {
max-width: 100%;
min-width: 100%;
}
<main>
<div id="container">
<img id="sponge" src="https://upload.wikimedia.org/wikipedia/en/thumb/3/3b/SpongeBob_SquarePants_character.svg/220px-SpongeBob_SquarePants_character.svg.png">
<div class="eye-container left">
<div class="eye"></div>
</div>
<div class="eye-container right">
<div class="eye"></div>
</div>
</div>
</main>
The current issue is the image is too big, it is stretched.
The initial problem was that the layout was not responsive on mobile, and i've did some changes and now the image is this big.
I've used aspect-ratio: 1 / 1; because top was not working with negative percentage, and with pixels the eyes location is changing if is shrink the window.
Do you have another suggestion, maybe a simplified code will be better.
Thank you.
I'm a noob developer and I felt like, this was a tiny engineering job "LOL" but I did it for you.
So the most important point in this is to keep the image and the eyes in the same position. and to do that, you should position them in a parent container for image and eyes considering four important factors:
1- Parent position: relative; All children position: absolute;
2- All children's width: %; so it can stay in the same spot in its parent whatever the width of the parent is.
3- Eyes and eyeballs positioning top, left, right must be % too for the same purpose.
4- To change the image size, use the parent width. do not change the image size.
If you follow these steps, you can position any element with any image or other element.
* {
border: 1px solid blue;
margin: 0;
padding: 0;
}
.container {
width: 200px; /* use this to change the picture size. do not change it somewhere else */
position: relative;
}
.image {
width: 100%;
}
.eye-container{
position: absolute;
border-radius: 50%;
background-color: red;
width: 12%;
height: 12%;
}
.left-eye {
top: 17%;
left: 36%;
}
.right-eye {
top: 17%;
left: 51%;
}
.eyeball {
position: absolute;
bottom: 3px;
right: 2px;
display: block;
width: 30%;
height: 30%;
border-radius: 50%;
background-color: #000;
}
<div class="container">
<img class="image" src="https://upload.wikimedia.org/wikipedia/en/thumb/3/3b/SpongeBob_SquarePants_character.svg/220px-SpongeBob_SquarePants_character.svg.png">
<div class="left-eye eye-container">
<div class="eyeball"></div>
</div>
<div class="right-eye eye-container">
<div class="eyeball"></div>
</div>
</div>
I have quite simply code and i've spent a day for solving problem, but still no progress :/ I want to display iframe with background-image. Snippet code is not showing background-image, so You can see live demo here: http://lukdan2.47.pl/index2.php
.parrent {
width: 100%;
background-image: url('http://lukdan2.47.pl/images/black-iphone-frame.png');
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: relative;
max-width: 427px;
}
.child {
margin: 0 auto;
position: relative;
width: 73%;
padding-top: 37%;
}
iframe {
border: none;
width: 100%;
height: 100%;
margin: 0;
}
<div class="parrent">
<div class="child">
<iframe src="http://sshtest.co.pl/" id="iphone-x-portrait"></iframe>
</div>
</div>
As You can see iframe has too much height. I can add
.child {
margin: 0 auto;
position: relative;
width: 73%;
padding-top: 37%;
height: 550px;
padding-bottom: 37%;
}
and it works fine.
But, for screen lower than 460px parent div is getting smaller so static height for child is not working correctly.
I've tried to change parent div to display flex and table (and change child div also) but nothing found that will solve my problem.
Help, please.
Ok, i've found solution.
.iframe-container {
padding-top: 56.25%;
position: relative;
background-image: url('http://lukdan2.47.pl/images/black-iphone-frame.png');
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
}
.iframe-container iframe {
border: 0;
height: 62%;
left: 40%;
position: absolute;
top: 0;
width: 20%;
margin: 0 auto;
padding-top: 11%;
padding-bottom: 0%;
}
<div class="iframe-container">
<iframe src="http://sshtest.co.pl/"></iframe>
</div>
I have a circular div that represents white circle and the logo. It seems like I wanted it to be.
<div class="whiteCircle">
<div class="image" style="background-image: url('https://www.postnl.nl/Images/marker-groen-PostNL_tcm10-72617.png?version=1');"></div>
</div>
.whiteCircle {
width: 65px;
height: 65px;
background-color: white;
border-radius: 50px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
Then, I created another rectangle div as a sibling to whiteBox, for the other contents.
<div class="box">
<div class="text">
<h2>Heading</h2>
</div>
</div>
The positioning of both parents looks alright however I couldn't figure out a way to move the Heading above the whiteBox. I played with the combinations of z-index but I read it's not possible to adjust children's z-index and parent at the same time.
What am I doing wrong? What is the proper way of achieving it?
https://codepen.io/anon/pen/mwKrdG
1- Remove the z-index from your parent div.
2- Add z-index to your white-box div, i choose the value 20.
3- Absolute positioning your .text class and make sure the z-index of it is bigger than 20;
The css
body {
background-color: lightblue;
}
.whiteBox {
width: 65px;
height: 65px;
background-color: white;
border-radius: 50px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
z-index:20;
}
.image {
text-align: center;
height: 100%;
background: no-repeat center center;
}
.container {
width: 275px;
height: 350px;
background-color: white;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 38px
}
.text {
text-align: center;
z-index: 25;
position: absolute;
left: 35%;
}
https://codepen.io/anon/pen/OgEROK
My problem is that I wanted to have split page by two divs side by side (50% width). Inside of them I wanted to place another divs and make them aligned vertically and horizontally at the same time.
I think that it is possible to make it without JS, but I'm not able to do that.
Can anybody make my two circles placed in the center (V,H) of their parent DIV, which are 50% of width and 100% of height so that when I will resize my window the circles will always be in center (and side by side as is now)?
Here is my code:
<div id="container">
<div class="left">
<div class="kolo1">
sometext1
</div>
</div>
<div class="right">
<div class="kolo2">
sometext 2
</div>
</div>
</div>
And a JSFiddle for that: http://jsfiddle.net/m5LCx/
Thanks in advance in solving my quest :)
It's actually quite simple, all you need to do is to simulate a table-like behaviour:
HTML markup:
<div id="container">
<div>
<div class="half left">
<div class="circle">hello</div>
</div>
<div class="half right">
<div class="circle">world</div>
</div>
</div>
</div>
CSS styles:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container {
display: table;
width: 100%;
height: 100%;
}
#container > div {
display: table-row;
}
.half {
display: table-cell;
width: 50%;
text-align: center;
vertical-align: middle;
}
.half.left {
background: red;
}
.half.right {
background: blue;
}
.circle {
display: inline-block;
padding: 50px;
border-radius: 50%;
}
.half.left .circle {
background: blue;
}
.half.right .circle {
background: red;
}
Final result http://jsfiddle.net/m5LCx/11/:
Working here http://jsfiddle.net/3KmbV/
add position: relative in .left and .right class and than add margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; in .kolo1 and .kolo2 class. and remove top position from .left class
try it
body {
background-color: #006666;
margin: 0 auto;
height: 100%;
width: 100%;
font-size: 62.5%;
}
#container {
width: 100%;
min-height: 100%;
height: 100%;
position: absolute;
}
.left {
width: 50%;
min-height: 100%;
float: left;
top: 0;
background-color: #660066;
position: relative;
}
.right {
width: 50%;
min-height: 100%;
float: right;
min-height: 100%;
background-color: #003366;
position: relative;
}
.kolo1 {
background-color: #0f0;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.kolo2 {
background-color: #00f;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
you can give postion: relative to .left and .right.
and give below CSS for to .kolo1 and .kolo2
margin: -5em 0 0 -5em;
position: absolute;
left: 50%;
top: 50%;
Updated demo
Another fiddle. This one uses absolute positioning with negative margins to ensure the circles are always in the centre. CSS looks like this
.kolo1 {
position: absolute;
top: 50%;
left: 50%;
margin-left: -5em; /* this must be half of the width */
margin-top: -5em; /* this must be half of the height */
}
As #Tushar points out, you need to set the position of the parent element to relative also.
Working Fiddle
.kolo1 {
background-color: #0f0;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: 50% auto 0 auto;
}
.kolo2 {
background-color: #00f;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: 50% auto 0 auto;
}
Try adding padding-top:50% for parent divs (having class left and right)
I know that this is SIMILAR to a few questions already out there, but it's different in that it's not my main body background that's causing the problem, and so I'm lost.
The website is at http://www.thesweet-spot.com/test77
The problem is that when you shrink your viewport to be smaller than the content and then scroll down, the wavy line on the left stops at where the bottom of your viewport originally was. The tricky part is that I want the wavy line on the left to scroll WITH the content when the content is too long.
The relevant CSS looks like this:
body {
background: url('images/background.jpg');
margin: 0;
padding: 0;
min-width: 1000px;
}
#container {
width: 100%;
position: absolute;
top: 105px;
bottom: 0;
margin: 0;
padding: 0;
}
#sidebarbg {
background: url('images/chocolate.jpg');
width: 300px;
height: 100%;
position: fixed;
left: 0;
z-index: 11;
background-attachment:fixed;
}
#sidebar {
background: url('images/sidebar.png');
width: 300px;
height: 100%;
position: absolute;
left: 0;
z-index: 12;
}
#contentnest {
position: absolute;
top: 50px;
left: 365px;
right: 0;
z-index: 14;
}
#content {
background: url('images/contentbg.png');
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
-khtml-border-radius: 30px;
padding: 20px;
border: #f062a4 3px solid;
width: 80%;
min-width: 350px;
margin-left: auto;
margin-right: auto;
font-size: 22px;
line-height: 150%;
font-family: QuicksandBook, Tahoma, Arial, sans-serif;
color: #905131;
}
and the HTML looks like this:
<body>
<div id="sidebarbg"></div>
<div id="sidebar"></div>
<div id="container">
<div id="contentnest">
<div id="content">
<! -- content goes here -->
</div>
</div>
</div>
</body>
What am I missing?
in #sidebar try removing height:100% and add bottom:-99999em
the other way is to make the sidebar position:fixed.
I was able to get the BG of my absolute container to extend beyond the viewport by adding this to my div style that has the BG.
min-height: 100%;
height: 100%;
overflow-y: scroll;
This will cause a double scroll bar so add this to your body style
overflow-y: hidden;