i am trying to get a div to be my background and am using absolute positioning to achieve it. everything works fine except for the fact that it appears above anything in the normal flow and fiddling with z-indexes does absolutely nothing.
<div id="blind">
<div id="blindbackground"></div>
<div id="blindcontainer">
<div class="loader">
<img class='loader' src="/img/loader.gif"/>
</div>
</div>
<div id="blindclosecontainer">
<img id='blindclose' src="/img/close.gif"/>
</div>
</div>
and this is the css:
#blind{
position :absolute;
width:100%;
z-index: 2;
border-bottom: 1px silver solid;
}
#blindclosecontainer{
text-align: right;
}
#blindbackground{
position:absolute;
top:0;
width:100%;
height:100%;
background-color: white;
filter:alpha(opacity=60);
opacity:0.6;
}
#blindcontainer{
margin:auto;
width:500px;
background-color: white;
padding:10px;
}
.loader{
margin: auto;
width:18px;
margin-top:10px;
margin-bottom: 5px;
}
Add position:relative; to the #blindcontainer and #blindclosecontainer classes.
Related
.wrap{
position:fixed;
left:0; top:45px;
width:100%;
text-align:center;
background:gold;
}
.datewrap{
display:inline-block;
margin:0 5px;
border:2px solid red;
overflow:hidden;
}
.btnow{
display:inline-block;
background:green;
color:white;
margin:0 5px;
border:2px solid red;
}
<div class='wrap'>
<div class='datewrap'>323232</div>
<div class='btnow'>NOW</div>
</div>
Why is btnow moved down? It should be inline with datewrap.
If I remove overflow:hidden from datewrap - it's ok.
But I need overflow:hidden on datewrap.
When you use of overflow:hidden[overflow property evaluating to something other than visible] , the baseline is the bottom edge of the margin-box[insert margin-bottom and see result],so this element for align its baseline with baseline of other element move up a bit.
for fix use of vertical-align: top; like this:
.btnow {
vertical-align: top;
//Other css
}
.wrap{
position:fixed;
left:0; top:45px;
width:100%;
text-align:center;
background:gold;
}
.datewrap{
display:inline-block;
margin:0 5px;
border:2px solid red;
overflow:hidden;
}
.btnow{
display:inline-block;
background:green;
color:white;
margin:0 5px;
border:2px solid red;
vertical-align: top;
}
<div class='wrap'>
<div class='datewrap'>323232</div>
<div class='btnow'>NOW</div>
</div>
text-align really shouldn't be used to position elements. There are far better ways to achieve this.
I don't know why overflow is causing it to "teeter-totter", but below is some code to fix this.
.wrap{
display: flex;
justify-content: center;
/* and if you want to make sure the elements are always aligned vertically */
align-items: center;
/* remember: justify-content will always control the same direction as the flex
** box; so, if the flex box is a row, justify-content will control the horizontal
** spacing and align-items will control the vertical spacing, but if the flex box
** is a column justify-content will control the vertical and align-items will
** control the horizontal. */
width: 100%;
position: fixed;
top: 45px;
left: 0;
background: gold;
}
.datewrap, .btnow {
margin: 0 5px;
display: inline-block;
border: 2px solid red;
}
.datewrap{
overflow: hidden;
}
.btnow{
color: white;
background: green;
}
<div class='wrap'>
<div class='datewrap'>323232</div>
<div class='btnow'>NOW</div>
</div>
.wrap{
position:fixed;
left:0; top:45px;
width:100%;
text-align:center;
background:gold;
}
.datewrap{
display:inline-block;
margin:0 5px;
border:2px solid red;
overflow:hidden;
}
.btnow{
display:inline-block;
background:green;
color:white;
margin:0 5px;
border:2px solid red;
position:inherit;
}
<div class='wrap'>
<div class='datewrap'>323232</div>
<div class='btnow'>NOW</div>
</div>
The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.
Reference Link:
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
.wrap {
position: fixed;
left: 0;
top: 45px;
width: 100%;
text-align: center;
background: gold;
}
.datewrap, .btnow {
display: inline-block;
margin: 0 5px;
border: 2px solid red;
}
.datewrap {
overflow: hidden;
vertical-align: bottom
}
.btnow {
color: white;
}
<div class='wrap'>
<div class='datewrap'>323232</div>
<div class='btnow'>NOW</div>
</div>
Note:
If you are writing code in real-time, you need to minimize your CSS.
i have a problem like this.
#relative{
position:relative;
width:100%;
height:100%;
text-align:center;
}
button{
margin:10px auto;
width:200px;
height:auto;
border:1px solid;
border-radius:5px;
}
#absolute{
position: absolute;
top: 0;
left:0;
height: 250px;
width: 100%;
border: solid 1px #000000;
color: blue;
font-weight: bold;
padding-top: 60px;
/*opacity:0;*/
}
button:hover{
background-color:#eed5a4;
}
<div id="relative">
<button>
Hover me if you can.
</button>
<div id="absolute">
Absolute its me dude!!<br>
If me >> opacity:0<br>
Button still cant be hover.
</div>
</div>
Any solution for this, and i dont know to use the good english language
Note : button keep like this, do not change the position absolute too.
- my english so bad :(
Add position:relative; and a higher z-index than that of the #absolute div to the button itself, like so:
HTML
<button id="relative-button">Hover me if you can.</button>
CSS
#absolute { z-index:1 }
#relative-button { position:relative; z-index:2 }
replace button css like this
button {
border: 1px solid;
border-radius: 5px;
height: auto;
margin: 10px auto;
position: relative; /* newly added */
width: 200px;
z-index: 9; /* newly added */
}
Thanks #daniel lisik, you are awesome people. Extraordinary
#relative{
position:relative;
width:100%;
height:100%;
text-align:center;
}
button{
position:relative;
z-index:5;
margin:10px auto;
width:200px;
height:auto;
border:1px solid;
border-radius:5px;
}
#absolute{
position: absolute;
z-index:1;
top: 0;
left:0;
height: 250px;
width: 100%;
border: solid 1px #000000;
color: blue;
font-weight: bold;
padding-top: 60px;
/*opacity:0;*/
}
button:hover{
background-color:#eed5a4;
}
<div id="relative">
<button>
Hover me if you can.
</button>
<div id="absolute">
Absolute its me dude!!<br>
If me >> opacity:0<br>
Button still cant be hover.
</div>
</div>
Following HTML, displays a picture in the background and text nhs subscription written over it. Now when I give class="nhs_head" margin-top text along with image moves down. Why is it so ?
How can I just give text the margin ?
<body>
<div class="image_holder">
<div class="nhs_head"> NHS SUBSCRIPTION </div>
</div>
</body>
CSS:
.image_holder {
position:relative;
background-image:url(bg2.jpg);
height:768px;
width:1366px;
}
.nhs_head {
display:block;
width:60%;
margin:0 auto;
border:2px solid white;
font-family:Calibri;
font-weight:800;
font-size:30px;
color:white;
}
Demo
If you want to apply margin-top to text you can position absolute the text in relatively positioned image div.
css
body, html {
margin:0;
}
.image_holder {
position: relative;
background-image:url('http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg');
height:768px;
width:1366px;
}
.nhs_head {
width:60%;
margin:0 auto;
border:2px solid white;
font-family:Calibri;
font-weight:800;
font-size:30px;
margin-top: 30px;
color:white;
position: absolute;
left:0;
right:0;
margin-top: 30px;
}
i want to achieve the border and header like this -
[![][1]][1]
Does css have anything for it?
What i tried and works is-
.header{
margin-top:-10px;
background:#fff;
}
Are there any other options to achieve this.?
[1]: https://i.stack.imgur.com/iHCVG.jpg
You can use :before or :after
Fiddle
HTML:
<header></header>
CSS:
header{
border:3px solid;
height:300px;
position:relative;
}
header:before{
content:'Header';
position:absolute;
top:-10px;
left:50px;
background:#fff;
padding:0 20px;
}
You can also use two elements:
header and h1
JSFiddle
html:
<header><h1>Header</h1></header>
CSS:
header{
border:3px solid;
height:300px;
position:relative;
}
header > h1{
position:absolute;
top:-35px;
left:50px;
background:#fff;
padding:0 20px;
}
Or keep it really simple and use fieldset.
JSFiddle
<fieldset>
<legend>Header</legend>
</fieldset>
As already commented, you could use fieldset. Which will work, but isn't the cleanest solution if it isn't used for a form.
The HTML <fieldset> element is used to group several controls as well as labels (<label>) within a web form.
Source.
As alternativ you could try this code:
HTML:
<div class="box">
<h3>title</h3>
</div>
CSS:
.box
width: 400px;
height: 200px;
border: 1px solid black;
}
.box > h3 {
position: absolute;
background: white;
height: 20px;
margin-top: -12px;
margin-left: 10px;
padding: 0 10px;
}
DEMO
Pink and green layout are parent layout. When gray layout is clicked blue layout will be created. I want blue layout overlay the parent layout (pink and green) and comes to top.
But the blue layout is overlay by pink layout. I need help on it.
div{
display:block;
}
#content{
height:400px;
width:100%;
background-color:green;
}
.center{
width:100px;
height:100px;
background-color:#808080;
text-align: center;
margin:auto;
}
#foo{
background-color:#2060ff;
border: 1px solid #000;
width:50px;
height:50px;
}
<div id="content">
<div id="d" class="center">
<div class="center">
Click here to create new blue element
</div>
</div>
<div style="background-color:pink;width:100%;height:20px;"></div>
</div>
Check JSFiddle
Add some positioning and a z-index...
#foo{
position: relative;
background-color:#2060ff;
border: 1px solid #000;
width:50px;
height:50px;
z-index: 1;
}
DEMO
You need to adjust the z-index. z-index needs to be positioned to work correctly. See jsfiddle.
#foo{
background-color:#2060ff;
border: 1px solid #000;
width:50px;
height:50px;
position:relative;
z-index:100;
}
Can I suggest absolute positioning?
#foo{
position:absolute; // <-- here is the change
background-color:#2060ff;
border: 1px solid #000;
width:50px;
height:50px;
}
This, of course, is if I understand your question correctly...
What you need to do is to use a z-index. According to http://www.w3schools.com/cssref/pr_pos_z-index.asp specifies the stack order of an element. Please note you will have to make the div's relative Please see code
http://jsfiddle.net/wbfTq/16/
div{
display:block;
}
#content{
position: relative;
height:400px;
width:100%;
background-color:green;
}
.center{
width:100px;
height:100px;
background-color:#808080;
text-align: center;
margin:auto;
}
#foo{
position: relative;
background-color:#2060ff;
z-index:1px;
border: 1px solid #000;
width:50px;
height:50px;
}
Do let me know if this answers your question!