My code
<div style="background-color: grey; width: 900px; height: 900px;">
<div style="width: 200px; height: 200px; background-color: green; right: 50px;">
</div>
<div style="width: 300px; height: 200px; background-color: blue; right: 100px;">
</div>
<div style="width: 300px; height: 200px; background-color: yellow; right: 100px;">
</div>
</div>
I also read reference at here https://developer.mozilla.org/en-US/docs/Web/CSS/right . I want right: 50px; have affect. How to fix?
Your <div>'s doesn't got any position attribut.
Sample :
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div style="position: relative; background-color: grey; width: 900px; height: 900px;">
<div style="position: absolute; top: 0; width: 200px; height: 200px; background-color: green; right: 50px;">
</div>
<div style="position: absolute; top: 200px; width: 300px; height: 200px; background-color: blue; right: 100px;">
</div>
<div style="position: absolute; top: 400px; width: 300px; height: 200px; background-color: yellow; right: 100px;">
</div>
</div>
</body>
</html>
You need to set position for each div as follows.
<div style="background-color: grey; width: 900px; height: 900px; position: relative;">
<div style="width: 200px; height: 200px; background-color: green; right: 50px; position: absolute;">
</div>
<div style="width: 300px; height: 200px; background-color: blue; right: 100px; position: absolute; top: 200px;">
</div>
<div style="width: 300px; height: 200px; background-color: yellow; right: 100px; position: absolute; top: 400px;">
</div>
</div>
You have to give position attribute along with the right attribute
as right, left, top and bottom only works with position other than static and by default the position of all the HTML elements are static, that is why it is not working
So, You have add a position property to make this work
<div style="background-color: grey; width: 900px; height: 900px; position: relative">
<div style="width: 200px; height: 200px; background-color: green; right: 50px; position: absolute">
</div>
<div style="width: 300px; height: 200px; background-color: blue; right: 100px; position: absolute">
</div>
<div style="width: 300px; height: 200px; background-color: yellow; right: 100px; position: absolute">
</div>
</div>
Related
So at first I set the blue container's height and width to 25px and to translate it to the top right corner of the green container I simply translate x to 100-25=75px and it works fine,
<div id="app" style="margin: 20px">
<div
style="
position: absolute;
height: 300px;
width: 300px;
background-color: red;
"
></div>
<div
style="
position: absolute;
height: 100px;
width: 100px;
background-color: green;
"
></div>
<div
style="
position: absolute;
height: 25px;
width: 25px;
background-color: blue;
transform-origin: center center;
transform: translateX(75px);
"
></div>
</div>
Now I want to achieve the same with scale. I set height and width of blue container to 40px and I scale it to 0.625 which basically sets the height and width of blue container to 25px like above. However now when I want to translate it I can't translate with the above value i.e. 75px. I tried putting the blue container back to top left and again tried translating to 75px but it still doesn't work,
<div id="app" style="margin: 20px">
<div
style="
position: absolute;
height: 300px;
width: 300px;
background-color: red;
"
></div>
<div
style="
position: absolute;
height: 100px;
width: 100px;
background-color: green;
"
></div>
<div
style="
position: absolute;
height: 40px;
width: 40px;
background-color: blue;
transform-origin: center center;
transform: scale(0.625) translateX(-15px) translateY(-15px)
translateX(75px);
"
></div>
</div>
Translate then scale and set the origin to be top right
<div id="app" style="margin: 20px">
<div
style="
position: absolute;
height: 300px;
width: 300px;
background-color: red;
"
></div>
<div
style="
position: absolute;
height: 100px;
width: 100px;
background-color: green;
"
></div>
<div
style="
position: absolute;
height: 40px;
width: 40px;
background-color: blue;
transform-origin: top right;
transform:translate(60px) scale(0.625);
"
></div>
</div>
Or like below (96 = 60/0.625)
<div id="app" style="margin: 20px">
<div
style="
position: absolute;
height: 300px;
width: 300px;
background-color: red;
"
></div>
<div
style="
position: absolute;
height: 100px;
width: 100px;
background-color: green;
"
></div>
<div
style="
position: absolute;
height: 40px;
width: 40px;
background-color: blue;
transform-origin: top right;
transform:scale(0.625) translate(96px);
"
></div>
</div>
UPDATE
without transform-origin (30% = ((1-0.625)/2)/0.625) * 100%)
<div id="app" style="margin: 20px">
<div
style="
position: absolute;
height: 300px;
width: 300px;
background-color: red;
"
></div>
<div
style="
position: absolute;
height: 100px;
width: 100px;
background-color: green;
"
></div>
<div
style="
position: absolute;
height: 40px;
width: 40px;
background-color: blue;
transform:translate(60px) scale(0.625) translate(30%,-30%);
"
></div>
</div>
<div style="overflow-y: scroll; overflow-x: scroll; height: 200px; width: 200px">
<div style="border-color: black; height: 100px; width: 30px; border: 2px; border-style: solid; position:absolute; left: 20px; top: 200px">
</div>
</div>
I would expect that the div inside the scroll-able div doesn't show up outside the scroll-able div.
How can I archive this ? The Rectangle should only be visible in the scroll-able div.
you need to reset position, either for the parent or the child : example below
/* CSS here for demo purpose to put both example side by side*/
body {
display:grid;
grid-template-columns:1fr 1fr;
grid-auto-flow:row dense;
}
body>*{grid-column:1;margin:auto;}
body >:nth-child(2) ~ * {grid-column:2;}
<p>position relative on parent,<br><b> so the parent becomes the reference for the absolute child</b></p>
<div style="overflow-y: scroll; overflow-x: scroll; height: 200px; width: 200px;position:relative;">
<div style="border-color: black; height: 100px; width: 30px; border: 2px; border-style: solid; position:absolute; left: 20px; top: 200px">
</div>
</div>
<p> static position on children<br><b> so it is part of the flow</b></p>
<div style="overflow-y: scroll; overflow-x: scroll; height: 200px; width: 200px">
<div style="border-color: black; height: 100px; width: 30px; border: 2px; border-style: solid; margin-left: 20px; margin-top: 200px">
</div>
</div>
Absolutely positioned elements Are removed from their parents, and displayed over the DOM. Remove position:absolute; and change your top and left to margin-top and margin-left
.one{
overflow-y: scroll;
overflow-x: scroll;
height: 200px;
width: 200px"
}
.two{
border-color: black;
height: 100px;
width: 30px;
border: 2px;
border-style: solid;
margin-left: 20px;
margin-top: 200px
}
<div class="one">
<div class="two">
</div>
</div>
Add position: relative to the top div
<div style="position: relative; overflow-y: scroll; overflow-x: scroll; height: 200px; width: 200px">
<div style="border-color: black; height: 100px; width: 30px; border: 2px; border-style: solid; position:absolute; left: 20px; top: 200px">
</div>
</div>
Snippet Demo:
.container {
position: relative;
overflow-y: scroll;
overflow-x: scroll;
height: 200px;
width: 200px;
}
.box {
height: 100px;
width: 30px;
position: absolute;
top: 200px;
left: 20px;
border: 2px solid black;
}
<div class="container">
<div class="box">
</div>
</div>
I need to scroll parts of a div and ignore scrolling on other parts.
In my example I need to scroll blue and green but want red to stay on its place.
JSFiddle
<div style="width: 100px;
height:200px;
border: solid black 1px;
overflow-x: auto">
<div style="width: 120px; height: 50px;background-color:blue">
</div>
<div style="width: 100px; height: 30px;background-color:red">
</div>
<div style="width: 120px; height: 50px;background-color:green">
</div>
</div>
Does anyone has an idea how to solve my problem?
You can use position: fixed:
#wrapper {
width: 100px;
height:200px;
border: solid black 1px;
overflow-x: auto;
}
#blue {
width: 120px;
height: 50px;
background-color:blue;
}
#red {
width: 100px;
height: 30px;
background-color:red;
position: fixed;
}
#green {
width: 120px;
height: 50px;
background-color:green;
}
<div id="wrapper">
<div id="blue"></div>
<div id="red"></div>
<div id="green"></div>
</div>
Do this change.It worked for me:
<div style="width: 100px; height:200px; border: solid black 1px;overflow-x: auto">
<div style="width: 120px; height: 50px;background-color:blue">
</div>
<div style="width: 100px; height: 30px;background-color:red;position:fixed;">
</div>
<div style="width: 120px; height: 50px;background-color:green">
</div>
</div>
Hope this is what you want.
I have a div which contains other divs inside. I have set the css so they are arranged properly as shown here:
which i use the following code for:
HTML
<div class="catogories">
<div class="category"><img src="images/road-bikes.png" style="width: 300px; height:200px;">
<h1>Road Bikes</h1></div>
<div class="category"><img src="images/mountain-bikes.png" style="width: 300px; height:200px;">
<h1>Mountain Bikes</h1></div>
<div class="category"><img src="images/hybrid-bikes.png" style="width: 300px; height:200px;">
<h1>Hybrid Bikes</h1></div>
<div class="category"><img src="images/city-bikes.png" style="width: 300px; height:200px;">
<h1>City Bikes</h1></div>
</div>
CSS
.catogories {
position: absolute;
width: 60%;
float: left;
left: 20%;
height: 600px;
top: 70%;
background-color: green;
}
.category {
position: relative;
height: 330px;
width: 300px;
float: left;
left: 5%;
margin: 4%;
background-color: red;
}
.category h1{
font-size: 40px;
font-family: Arial;
text-align: center;
}
It all looks fine, so i decided to add links to them, make them clickable. So i added the < a > tag which completly ruined everything and i have no idea why. I even have a screenshot:
HTML
<div class="catogories">
<a href="#"><div class="category"><img src="images/road-bikes.png" style="width: 300px; height:200px;">
<h1>Road Bikes</h1></div></a>
<a href="#"><div class="category"><img src="images/mountain-bikes.png" style="width: 300px; height:200px;">
<h1>Mountain Bikes</h1></div></a>
<a href="#"><div class="category"><img src="images/hybrid-bikes.png" style="width: 300px; height:200px;">
<h1>Hybrid Bikes</h1></div></a>
<a href="#"><div class="category"><img src="images/city-bikes.png" style="width: 300px; height:200px;">
<h1>City Bikes</h1></div></a>
</div>
CSS
.catogories {
position: absolute;
width: 60%;
float: left;
left: 20%;
height: 600px;
top: 70%;
background-color: green;
}
.category {
position: relative;
height: 330px;
width: 300px;
float: left;
left: 5%;
margin: 4%;
background-color: red;
}
.category h1{
font-size: 40px;
font-family: Arial;
text-align: center;
}
Try to order them like this:
<div class="category">
<img src="images/road-bikes.png" style="width: 300px; height:200px;"><h1>Road Bikes</h1>
</div>
For some reason, attribute vertical-align: middle; is not applied to span tag. Here is the code:
<div style="position: relative; background-color: gray; padding: 1%; width: 100%; height: 60px;">
<div style="background-color: green; width: 50%; height: 100%">
<span style="position: absolute; display: inline-block; text-align: center; width: 100%; vertical-align: middle">
50%
</span>
</div>
</div>
Since you know the height of the outer div is 60px, you can set the line-height of the span to match it:
<div style="position: relative; background-color: gray; padding: 1%; width: 100%; height: 60px;">
<div style="background-color: green; width: 50%; height: 100%">
<span style="position: absolute; display: inline-block; text-align: center; width: 100%; vertical-align: middle;line-height: 60px;">
50%
</span>
</div>
</div>
You could use line-height to center your text vertically, in this case use line-height: 60px
<div style="position: relative; background-color: gray; padding: 1%; width: 100%; height: 60px;">
<div style="background-color: green; width: 50%; height: 100%">
<span style="position: absolute; display: inline-block; text-align: center; width: 100%; line-height: 60px;">
50%
</span>
</div>
</div>