body {
margin: 0;
}
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="content"></div>
</body>
</html>
```
positon: fixed does not cling to the top when applied.
I don't think there are any elements, so I think I should stick up completely, why not?
https://jsfiddle.net/9gqcxLn0/
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
top: 0;
}
you should use top:0
I don't see an issue other than you never told it where it was supposed to fix to. You likely wanted a top: 0 in the style, but it should remain fixed from where it was located without it, I believe.
html, body {
margin: 0;
padding: 0;
}
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
top: 0;
}
main {
height: 200vh;
}
<main>
abcdefghijk
<div class="content"></div>
12345678901234567890
</main>
Related
I would like to frame the picture in this way, but I do not know what is wrong with the code, that the bottom part of the border is thicker than the top (red border) link to the view
[1]: https://i.stack.imgur.com/quFZn.jpg
Code:
.image {
flex: 1 1 40rem;
position: relative;
&::before,
&::after {
content: '';
position: absolute;
z-index: -1;
background: $red;
height: 25rem;
width: 25rem;
}
&::before {
top: 0;
left: 0;
}
&::after {
bottom: 0;
right: 0;
}
img {
width: 100%;
padding: .5rem;
}
}
the idea here is two create two divs and put the them behind the image (responsively using position)
just change the --outside-value var for creating bigger border or smaller
with the var in * selector is equal in all two borders :)
hope this helps, good coding!
here the code
* {
--outside-value: -0.2em;
}
html,
body {
height: 100%;
}
body,
#content {
display: flex;
justify-content: center;
align-items: center;
}
#content {
position: relative;
}
#content img {
width: 50vw;
z-index: 1;
}
.border {
width: 30vw;
height: 10vh;
position: absolute;
background-color: red;
}
.border-bottom {
top: var(--outside-value);
left: var(--outside-value);
}
.border-top {
position: absolute;
bottom: var(--outside-value);
right: var(--outside-value);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
<div class="border border-top"></div>
<img src="https://laaouatni.github.io/w11-clone/images/1dark.jpg">
<div class="border border-bottom"></div>
</div>
</body>
</html>
Hello I wanted to know if please can some one could help me to add one image called or loaded from css to a multiple images on html.
EXAMPLE:
Thanks in advance.
I think it will work for you
.image-wrap {
width: 300px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.image-wrap:after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-image: url(https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png);
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
<div class="image-wrap">
<img src="https://picsum.photos/300/450" />
</div>
I think you are need something like this.
.fi
{
z-index: 1;
width: 100%;
}
.fi2
{
position:absolute;
top: 25px;
left: 45%;
z-index: 2;
width: 300px;
margin: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<img src="https://images.news18.com/ibnlive/uploads/2021/07/1627377451_nature-1600x900.jpg" class="fi" >
</div>
<img src="https://media.newyorker.com/photos/5a95a5b13d9089123c9fdb7e/2:2/w_3289,h_3289,c_limit/Petrusich-Dont-Mess-with-the-Birds.jpg" class="fi2">
</body>
</html>
Let me know if this helps you
Here is one thing you could do.
Make sure the image sample ( has no background color ). then give it the same size and postion as the image with the background. when thats done give the image sample and z-index of 1. which will push it above the other picture.
.image1
{
z-index: 1;
width: 100%;
}
.imge2
{
position:absolute;
top: 25px;
left: 45%;
z-index: 2;
width: 300px;
margin: auto;
}
hope this is the solution to your answer
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>title</title>
<style>
#div1 {
position: absolute;
top: 0px;
left: 0px;
min-width: 100%;
width: auto;
height: 100%;
background: blue;
}
#div2 {
position: absolute;
top: 30%;
left: 0px;
width: 6000px;
height: 300px;
background: black;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
For example in the html page above
Starting view
When scrolling to the right
I thought setting the div1 width to auto would match the div2 width but it does not work. Am I missing something? Do I need to auto update the width with javascript or can it be done with CSS only?
I want it cover the entire page even if the page gets resized.
Set position: relative on #div2, #div1 will then expand with it:
#div1 {
position: absolute;
top: 0px;
left: 0px;
min-width: 100%;
width: auto;
height: 100%;
background: blue;
}
#div2 {
position: relative;
top: 30%;
left: 0px;
width: 6000px;
height: 300px;
background: black;
}
<div id="div1">
<div id="div2"></div>
</div>
I'm trying to create a 3 column webpage with sticky side bars + sticky header and footer, however I'm having issues as the sidebars goes above my header. What I want to accomplish is the sidebars floating under the header, and the only element moving when scrolling is the middle section.
div.sticky-header {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: yellow;
padding: 50px;
font-size: 20px;
}
.wrapper {
display: flex;
justify-content: space-between;
}
.main, .side-left, .side-right {
border: 3px solid black;
padding: 15px;
background-color: #fff;
}
.main {
width: 90%;
height: 150vh;
}
.side-left, .side-right {
width: 10%;
height: 25vh;
position: sticky;
position: -webkit-sticky;
top: 0;
margin: 0;
}
body {
background-color: #ccc;
font-family: sans-serif;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<title></title>
</head>
<body>
<div class="sticky-header">I will stick to the screen when you reach my scroll position</div>
<div class="wrapper">
<div class="side-left">
left
</div>
<div class="main">
middle stuff
</div>
<div class="side-right">
right
</div>
</div>
</body>
</html>
Fiddle:
https://jsfiddle.net/jbnak12c/
Thanks in advance!
Probably you already found the answer but for those who might also be having a look at this question z-index: 10; in div.sticky-header would do the trick.
Here I have three elements which have position: absolute.
First and Second elements are OK, but the third element just doesn't appear.
body {
margin: 0;
padding: 0;
background: red;
position: relative;
}
#first {
border: solid green;
height: 200px;
padding: 100px;
position: absolute;
top: 0;
left: 0;
height: 50px;
}
#second {
border: solid blue;
height: 200px;
padding: 100px;
position: absolute;
top: 0;
right: 0;
height: 50px;
}
#third {
position: absolute;
bottom: 0;
right: 0;
border: solid brown;
height: 100px;
padding: 100px;
height: 50px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<section id="first"></section>
<section id="second"> </section>
<section id="third"></section>
</body>
</html>
When you use position: absolute on an element, it's removed from the normal flow of the document. When you do that to all of the direct children of an element, it ends up collapsing down and has a height of 0. If you use the web inspector you can confirm that your container, in this case, body, is 0px tall.
Setting the bottom property on #third causes it to align with the bottom of the body element, which is at the top of the viewport, which subsequently results in your element being rendered above the viewport where you can't see it.
If you set a fixed height or min-height on the body you can resolve this. A common pattern is to set the minimum height for the body to be the height of the viewport:
body {
min-height: 100vh;
}