Basically i'm using a background(body) and i need certain elements to be positioned exactly where i want them to be(i used top/left %) (usually images and tables, but in this example i have used simple div elements); after resizing the browser window/ changing the resolution the elements are of course moving accordingly to the new size, hence they change position. I tried using a div parent to solve that, but i failed.
HTML & CSS :
body
{
background:black;
}
#content
{
background:blue;
top:1%;
position:relative;
height:900px;
max-width:1600px;
margin-left:auto;
margin-right:auto;
}
.a
{
position:absolute;
background:yellow;
height:600px;
width:800px;
top:15%;
left:5%;
}
.b
{
background:red;
height:100px;
width:100px;
position:absolute;
top:50%;
left:80%;
}
<div id="content">
<div class="a">
Box1
</div>
<div class="b">
Box2
</div>
</div>
I have changed the values to px rather than %
this would be helpful
the values are not exact, just for depiction
body
{
background:black;
}
#content
{
background:blue;
top:9px;
position:relative;
height:900px;
max-width:1600px;
margin-left:auto;
margin-right:auto;
}
.a
{
position:absolute;
background:yellow;
height:600px;
width:800px;
top:150px;
left:50px;
}
.b
{
background:red;
height:100px;
width:100px;
position:absolute;
top:50px;
left:80px;
}
<div id="content">
<div class="a">
Box1
</div>
<div class="b">
Box2
</div>
</div>
.a, .b{transform:translate(-50%,-50%);}
after adding this css you need to change top and left value according to place where you want to display those div/images.
Related
Hello all CSS newbie here,
I have a special case, where I want to position a text area on the edge of a div. I want the text area to be cropped even when a user types into the text area. I'm deeply confused on why does the textarea grows and pushes the position of the parent div even though I have set the parent div overflow to hidden ? Any ideas so that the textarea position stays as is (cropped)?
My code is as below:
HTML
<div class="wrapper">
<div class='box'>
<textarea class="text"/>
</div
</div>
CSS
.wrapper {
width:300px;
height:300px;
background:red;
}
.box {
width:200px;
height:200px;
background:blue;
overflow:hidden;
position:relative;
}
.text {
width:300px;
height:50px;
right:-250px;
background:yellow;
overflow:hidden;
position:absolute;
resize:none;
}
Here is the link to my Codepen
Thank you and deeply appreciate any thoughts and suggestions.
.wrapper {
width:300px;
height:300px;
background:red;
}
.box {
width:200px;
height:200px;
background:blue;
overflow:hidden;
position:relative;
}
.text {
max-width:300px;
height:50px;
right: 0;
background:yellow;
overflow:hidden;
position:absolute;
resize:none;
}
<div class="wrapper">
<div class='box'>
<textarea class="text"></textarea>
</div>
</div>
Your html code is not correct. And I used max-width for textarea.
I'm trying a web page with 3 section together:
div A width:200px
div B full width
div C width:10px;
HTML:
<div class="main">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>
CSS:
.main{
min-width: 1200px;
height: 100%;
width: 100%;
background-color:#F00;
}
.a{
width:200px;
height:500px;
background-color:#0F0;
float:left;
}
.b{
height:500px;
background-color:#00F;
float:left;
}
.c{
width:10px;
height:500px;
background-color:#FF0;
float:left;
}
But the div B not full screen!How to correct this?
You need to reorder your <div>. First <div class="a">, then <div class="c">, then <div class="b">:
<div class="main">
<div class="a">A</div>
<div class="c">C</div>
<div class="b">B</div>
</div>
As a next step, you will have to remove the float: left; from .b (making elements float removes the typical block level element behaviour of grabbing the available width) and change the float for .c to right.
The last step then will have to be that you will have to assign the width you want for all 3 to their container .main.
I think you will need some css lib like bootstrap etc or use media queries.
For fix wide the css will look like
.main{
min-width: 1200px;
height: 100%;
width: 100%;
background-color:green;
}
.a{
width:200px;
height:500px;
background-color:#0F0;
display:inline-block;
float:left;
}
.b{
height:500px;
background-color:#0F0;
display:inline-block;
width:990px;
}
.c{
width:10px;
height:500px;
background-color:#FF0;
display:inline-block;
float:right;
}
.b
{
background-color:#00F;
float:left;
height:500px;
min-width: 990px; /* 1200 -200-10*/
}
I've created the following to illustrate my question.
#container{
background-color:white;
position:relative;
}
#absolute{
position:absolute;
height:100%;
width:100%;
background-color:black;
}
#relative{
position:relative;
background-color:blue;
width:200px;
}
#content{
background-color:green;
height:50px;
width:50px;
}
<div id="container">
<div id="absolute"></div>
<div id="relative">
<div id="content"></div>
</div>
</div>
So I understand the following:
1) The content div is sized to 50px, so the containing divs (relative) also has a 50px height. All the way up to the container which is why the bar is a uniform 50px all across the screen.
2) If I remove the relative tag from the container, then the absolute div contents fill the screen, although the relative div is positioned in front still. This is because the absolute positioned element is now tied to the HTML element rather than the container and so is not restricted by the height of the container.
What I don't understand is:
1) If I remove the relative tag from the relative element, it disappears behind the absolute element. Even if I set a higher z-index on the relative element it does not show through.
#container{
position:relative;
}
#absolute{
position:absolute;
height:90%;
width:100%;
background-color:black;
z-index:1;
}
#relative{
//position:relative;
background-color:blue;
width:200px;
z-index:2;
color:white;
}
#content{
background-color:green;
height:50px;
width:50px;
}
<div id="container">
<div id="absolute"></div>
<div id="relative">
<div id="content">Test</div>
</div>
</div>
2) The absolute element is 50px high with no content due to the 100%, but if I give it content, it remains at 50px even when the content would overflow.
#container{
background-color:white;
position:relative;
}
#absolute{
position:absolute;
height:100%;
width:100%;
background-color:black;
color:white;
z-index:2;
}
#relative{
position:relative;
background-color:blue;
width:200px;
}
#content{
background-color:green;
height:50px;
width:50px;
}
<div id="container">
<div id="absolute">
Test<br/>Test<br/>Test<br/>Test
</div>
<div id="relative">
<div id="content"></div>
</div>
</div>
Can anyone please explain what the rule is that allows these elements to behave in this way. Many thanks.
To answer the first question :
If I remove the relative tag from the relative element, it disappears behind the absolute element. Even if I set a higher z-index on the relative element it does not show through.
It's because default position is position:static and that means ingnoring all positioning instructions including z-index,
in this case if you set #absolute with z-index negative value it will go on a lower layer:
#container{
position:relative;
}
#absolute{
position:absolute;
height:90%;
width:100%;
background-color:black;
z-index:-11;
}
#relative{
//position:relative;
background-color:blue;
width:200px;
z-index:2;
color:white;
}
#content{
background-color:green;
height:50px;
width:50px;
}
<div id="container">
<div id="absolute"></div>
<div id="relative">
<div id="content">Test</div>
</div>
</div>
as to question 2:
with height:100% it expands to height of parent;
I am trying to make two columns separated by or inside a circle page the second column should have an image it like this :
<div class="step second">
<div id="upload-img"></div>
<div id="sperator">
<div class="circle" id="or"><p class="number" style="padding-left:25%;">or</div>
</div>
<div id="default-img">
<img src=""/>
</div>
</div>
But for some reason the position of the #sperator div is changing with the image my css is bit long so here is a js fiddle for more explaining : here
As you can see the image should be in the same line with the other div but its changing the position of the separator div
You should re-check your html tags. Make sure each tag closed correctly
Here your css :
.step{
position:relative;
width:500px;
height:250px;
border:1px solid black;
}
#upload-img{
position:absolute;
left:0;
top:0;
width:50%;
height:100%
}
#default-img{
position:absolute;
right:0;
top:0;
width:50%;
height:100%
}
#upload-img img, #default-img img{
max-width:100%;
max-height:100%;
}
#sperator .circle{
position:absolute;
height:66px;
width:66px;
background-color:black;
top:50%;
left:50%;
margin:-33px auto auto -33px;
border-radius:50%;
z-index:100;
text-align:center;
}
#sperator .circle p{
font-size:35px;
font-family:futura-book;
color:white;
padding:0 !important;
margin:0;
line-height:60px;
}
.step::after{
content:'';
height:100%;
width:3px;
left:50%;
margin-left:-2px;
z-index:90;
position:absolute;
background-color:black;
}
potition:relative will be an area that will "lock" every potition:absolute inside it.
You can use position:relative as parent div and position:absolute as child div.
Consider a simple example with html
<div class="parent">
<div class="child">
</div>
</div>
and CSS
.parent{
position:relative;
background:red;
width:200px;
height:40px;
}
.child{
position:absolute;
top:40px;
left:30px;
width:70px;
height:70px;
background:blue;
}
to place a DIV with absolute position just beneath its parent (with relative position).
In this example, I equaled the absolute's top to the parent relative's height.
How to align the absolute DIV just under the parent when the height is unknown (both parent and child)?
Didn't think this would work myself, but it seems to:
html, body {
height: 100%;
}
.parent{
position:relative;
background:red;
width:200px;
height:40px;
}
.child{
position:absolute;
top:100%;
left:30px;
width:70px;
height:70px;
background:blue;
}
Check this..
HTML:
-------
<div class="parent">
</div>
<div class="child">
</div>
CSS:
-----
.parent{
position:relative;
background:red;
width:200px;
height:40px;
}
.child{
position:absolute;
top:auto;
left:30px;
width:70px;
height:70px;
background:blue;
}
(Example)
you can use negative value for bottom, eg. bottom: -100px
EDIT: here is better solution: http://jsfiddle.net/mqy4z/3/ - set child's position to top:100%
Try placing both div's in your HTML file under eachother:
<div class="parent">
</div>
<div class="child">
</div>