http://ipekevi.com/yeni/ in this page I want head div to above content div. I search here and find many solution but they don't work.
My part of css file about content and head div:
#content {
z-index: 1;
}
#head {
height: 140px;
position: relative;
z-index: 3;
}
I can not figure out. Please explain it.
#content {
z-index: 1;
height:50px;
width:50px;
position:relative;
top:0;
left:0;
}
#head {
height: 140px;
width:960px;
z-index: 999;
position:absolute;
top:0;
left:0;
}
You have to define the position and size,
I hope this helps! :)
Related
I would like, same as when you hover a GIF shot on Dribbble, display a div with infos when the cursor is after/at 50% from top of the item height.
Tested example
I made this, this is working but a bit tricky… especially when you mouseout.
— http://codepen.io/anon/pen/meZbJK
Used CSS code
.item {
position:relative; width:960px;
&--infos {
opacity:0;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
padding:0 10%;
text-align:center;
background:transparentize(#a7ecf8, 0.075);
transition:opacity 200ms ease-in-out;
}
p {
position:relative;
padding:0;
top:50%; transform:translateY(-50%);
}
strong {
display:inline-block;
margin-bottom:10px;
}
time {
color:#959595;
font-size:14px;
}
&--infos-target {
position:absolute;
bottom:0;
float:left;
width:100%;
height:50%;
}
&--infos-target:hover &--infos {
opacity:1;
top:-100%;
height:200%;
}
}
I made edits to your codepen to make it work.
Essentially, I took --infos out of --infos-target and used the ~ selector to grab it on hover. With that, I didn't have to do the top: -100%; height: 200% hack anymore.
Combine that with pointer-events: none on --infos and you're good to go.
Using z-index you can position the target above the info section and you're good to go.
The biggest issue here is that you cannot have links inside the info section because of pointer-events: none
http://codepen.io/anon/pen/XmLrgp
HTML
<div class="item">
<img src="http://lorempicsum.com/futurama/960/250/1" alt="">
<div class="item--infos-target">
</div>
<div class="item--infos">
<p>
<strong>Item title</strong>
<br>
<time datetime="2015-11-05 15:23:26" class="date">Added two weeks ago</time>
</p>
</div>
</div>
SCSS
.item {
position:relative; width: 960px;
&--infos {
opacity:0;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
padding:0 10%;
text-align:center;
pointer-events: none;
background:transparentize(#a7ecf8, 0.075);
transition:opacity 200ms ease-in-out;
z-index: 9;
}
p {
position:relative;
padding:0;
top:50%; transform:translateY(-50%);
}
strong {
display:inline-block;
margin-bottom:10px;
}
time {
color:#959595;
font-size:14px;
}
&--infos-target {
position:absolute;
bottom:0;
float:left;
width:100%;
height:50%;
z-index: 10;
}
&--infos-target:hover ~ &--infos {
opacity:1;
}
}
I think we need a bit of trickery here.
Firstly we need to "hide" the top 50% of the div/image from acting as a hover point/trigger.
We can use an absolutely positioned pseudo-element for that.
This means we can use the image (rather than the div) as our hover trigger...but this causes issues as the overlay would stop the hover effect. We can disable that with pointer-events:none.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
text-align: center;
}
.parent {
display: inline-block;
margin: 25px;
position: relative;
overflow: hidden;
}
.parent img {
display: block;
}
.info {
position: absolute;
top:100%;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,0,0,.5);
color:white;
line-height: 72px;
transition:top .25s ease;
pointer-events:none;
z-index:3;
}
.parent::before {
content: '';
position: absolute;
top:0;
left: 0;
height: 50%;
width: 100%;
background: rgba(0,0,0,.5); /* for demo visual reference */
z-index:2;
}
.parent img:hover ~ .info {
top:0;
}
<div class="parent">
<img src="http://lorempixel.com/g/200/200" alt="" />
<div class="info"><h3>Some Text</h3></div>
</div>
I have a poblem with an element that is positioned relative. The problem is that I have a header with position fixed and content which is positioned relative. If I scroll down the content the element is put in front of the header. I tried with z-index but I just can't get it to work. I have put z-index:999 on header.
Here you can see my jsFiddle
Here is a picture:
The z-index on the relative positioned element should be lower than the z-index on the fixed position element. Here is a quick example:
HTML
<div id="fixed">Fixed Position</div>
<div id="relative">Relative Position</div>
CSS
body{
height: 3000px;
}
#fixed{
top: 0;
height; 100px;
background: green;
width: 100%;
position: fixed;
z-index: 2;
}
#relative{
position: relative;
top: 100px;
left: 50px;
height: 100px;
width: 100px;
background: red;
z-index: 1;
}
Working Example: http://jsfiddle.net/XZ4tM/1/
Fixing Your Example
The header styling has an issue, there are two colons :: proceeding the z-index properties value.
.header{
width:960px;
background: #43484A;
height:80px;
position: fixed;
top:0;
z-index: 9999; /* Removed extra : here */
}
Fixed Example http://jsfiddle.net/kUW66/2/
What I think you did is correct that using z-index in only a option. I have some work for you to understand.
Please follow the JS Fiddle link
HTML
<div id="header">Header</div>
<div id="content1"><div id="content2"></div></div>
CSS
body{
margin:0px auto;
color:#FFF;
}
#header{
background-color:#006666;
width:100%;
height:50px;
position:fixed;
text-align:center;
font:bold 12px Arial, Helvetica, sans-serif;
line-height:50px;
display:block;
z-index:10;
}
#content1{
width:70%;
height:1200px;
margin:0px auto;
background-color:#FFFF66;
position:relative;
top:50px;
z-index:9;
}
#content2{
width:50px;
height:250px;
margin:0px auto;
background-color:#F60;
postition:absolute;
left:50px;
top:50px;
}
Hope that helps.
"Content" is relative to the window, not the grey square.
Did you try to make that grey square position:relative?
Without the HTML and the CSS, it's really hard to know the real cause.
.categories li{
position:relative;
z-index:-1;
list-style: none;
float:left;
width:310px;
height:310px;
color:white;
background:#77647F;
margin-right:10px;
}
check this fiddle :)HERE
I have changed the z-index to -1 to make it work.
I want to put two divs next to each other but no matter what I do, the second div always ends up somewhere under the first. I have tried:
div.one {
width:50%;
float:left;
}
div.two {
width:50%
float:right;
margin-left:50%;
}
and
div.one {
width:50%;
display:inline-block;
}
div.two {
width:50%;
display:inline-block;
}
From your first example try removing the margin.
div.one {
width:50%;
float:left;
}
div.two {
width:50%
float: left;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
Here is a link to a great tutorial that gives you several examples of positioning: http://www.barelyfitz.com/screencast/html-training/css/positioning
Both should be "float:left;"
The elements have to fit - when there is a border , margin or padding, the "width:50%;" might be too high.
.one {
width: 50%;
float: left;
background: green;
height: 100px;
}
.two {
width: 50%;
float: right;
height: 100px;
background: red;
}
http://jsfiddle.net/qf9GD/
Please look at this http://jsfiddle.net/jaseem/sS7HN/ . What I am trying to achieve is instead of that inner scroll-bar, I want to use the main window scroll bar; SO that I can use the windows vertical scroll bar to go through the content inside the "innerContent" but at the same time I want the outer div to be fixed. is that possible ?
CSS :
header {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 50px;
}
footer {
position: fixed;
left: 0;
bottom:0;
width: 100%;
}
content {
background-color:#656565;
width: 940px;
margin:0 auto;
padding-top:10px;
border-radius:5px;
}
mainContent {
margin:0px auto;
background-color:#515151;
width:660px;
border-radius:5px;
padding-top:20px;
}
contentHolder {
margin:0 auto;
width:616px;
background-color:#000000;
border-radius:10px;
overflow:auto;
}
HTML :
<div id="header"></div>
<div id="content">
<div id="mainContent">
<div id="contentHolder"></div>
</div>
</div>
<div id="footer"></div>
It's a little unclear what you are trying to accomplish, but I did notice you are missing the hash tags in your CSS. You need # in front of the identifier if you are referring to an ID attribute.
Example: http://jsfiddle.net/hgcax/
CSS
#header {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 50px;
}
#footer {
position: fixed;
left: 0;
bottom:0;
width: 100%;
}
#content {
background-color:#656565;
width: 940px;
margin:0 auto;
padding-top:10px;
border-radius:5px;
}
#mainContent {
margin:0px auto;
background-color:#515151;
width:660px;
border-radius:5px;
padding-top:20px;
}
#contentHolder {
color:#fff;
margin:0 auto;
width:600px;
height: 400px;
background-color:#000000;
border-radius:10px;
overflow:auto;
}
for div elements you have to give #div name here your div name is contentHolder so its #contentHolder
try like this:
#contentHolder {
overflow:auto;
}
or
#contentHolder {
overflow:scroll;
}
This is a really simple question about CSS. I want to get the style depicted in the picture, I tried this code:
#parent {
overflow: hidden;
text-align:center;
}
.navbar {
position:absolute;
top:0px;
right:3px;
}
.logo {
float:left;
}
.table {
float:left;
}
but it doesn't work for me, I get this:
Try:
#parent {
overflow: hidden;
text-align:center;
margin:auto;
width:80%;
}
.navbar {
position:absolute;
top:0px;
right:3px;
}
.logo {
float:left;
}
.table {
float:left;
}
In order to accomplish what you want, you'll need to center your parent divider using margin:auto and placing a fluid width using width:80%.
I'd give your parent element an explicit width, then position from there:
#parent {
width: 960px;
margin: 0 auto;
position: relative;
}
.navbar {
position: absolute;
top: 0;
right: 3px;
}
.logo {
margin-bottom: 20px;
display: inline-block;
}
.table {
width: 100%;
}
I don't know what other contents you have on the page, but your .logo element should appear where you want using default HTML flow. If the table is 100%, it will clear. You should be able to pull this off without floats.