I am trying to set a div at the right side, superimposed to a video tag element which has a poster attribute but for any reason, when I set the property right: 0 to align it at the right side, it is aligned to the right side of the document.
<div class="screen-container">
<div id="delete"></div>
<video id="preview"></video>
</div>
#screen-container{
width: 515px;
height: 600.23px;
}
#delete {
width: 40px;
height: 40px;
background-color: white;
background-size: 500px;
background-position: -97px -75px;
margin: 10px 10px;
cursor: pointer;
position: fixed;
z-index: 1;
}
#preview{
width: 100%;
height: 100%;
}
I have also tested to put the <div id="delete> inside the <video> but the <div> element wasn't vissible.
<div class="screen-container">
<video id="preview">
<div id="delete"></div>
</video>
</div>
Any idea of what is happening?
Thanks in advice
fixed positioning removes the element from the flow of the document and can not be contained within a parent. Use position: absolute instead and set the parent .screen-container to position: relative.
Following the answer of jmore009, I had a problem with elements that were comming behind.
To solve that other case, I just added did what I show at the code below:
<div class="screen-container">
<div id="delete"></div>
<video id="preview"></video>
</div>
<div class="screen-aux"></div>
.screen-container{
position: absolute;
}
#delete{
width: 40px;
height: 40px;
background-color: white;
background-size: 500px;
background-position: -97px -75px;
margin: 10px 10px;
cursor: pointer;
position: absolute;
z-index: 1;
right: 0;
}
That allows me to add vissible elements behind by keep using position relative.
Thanks!
Related
I have a parent div that contains two children, side by side. The first child is an image that must be height 100% and 58% width, margin auto and overflow hidden. The second child contains text, and the length of the text determines the height of the parent. This is a template for several pages, with different length of text, and therefore different parent height. Is it possible to do what I'm trying to do without using JS? Thanks for your input! Code below.
HTML:
<div id="product-summary">
<div class="product-image-container">
<img />
</div>
<div id="product-details">
<h3 class="product-title"></h3>
<div class="product-description"></div>
</div>
</div>
CSS:
.product-image-container {
position: absolute;
top: 0;
left: 0;
width: 58%;
height: 100%;
overflow: hidden;
img {
position: absolute;
top: 0;
left: 50%;
margin: auto;
transform: translateX(-50%);
min-width: 100%;
height: 100%;
}
}
#product-details {
float: right;
border: solid thin #777;
height: ~"calc(100% - 2px)";
width: 41%;
text-align: center;
}
The problem is your #product-details is floated, which creates a new BFM (block formatting context), and the parent gets collapsed.
I suggest you read more about BFMs here: http://yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/
There are several ways to fix this:
You could clear the parent, a way to do that is by adding overflow: hidden; to the #product-summary element.
You could remove the float: right from #product-details, and use flexbox to align it instead.
I don't know any preprocessor wizardry, but using inline-block works good, as well as keeping positioned absolute elements wrapped in a relative parent for control. It wasn't mentioned how the image is displayed, so I assume aspect ratio unchanged and no cropping.
SNIPPET
.product-image-container {
display: inline-block;
position: relative;
top: 0;
left: 0;
right: 0;
width: 58%;
height: 100vh;
overflow: hidden;
}
img {
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
#product-details {
float: right;
border: 1px solid #777;
height: 100%;
width: 41%;
text-align: center;
}
a {
margin-left: 50%;
}
<div id="product-summary">
<div class="product-image-container">
<img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'>
</div>
<div id="product-details">
<h3 class="product-title">Lena Söderberg</h3>
<div class="product-description">
<blockquote>Lenna or Lena is the name given to a standard test image widely used in the field of image processing since 1973. It is a picture of Lena Söderberg, shot by photographer Dwight Hooker, cropped from the centerfold of the November 1972 issue of Playboy
magazine.
</blockquote>
<a href='https://en.wikipedia.org/wiki/Lenna'>Wikipedia</a>
</div>
</div>
</div>
Most of my code in a jsFiddle:
http://jsfiddle.net/MilkyTech/suxWt/
The content should load on the first page in a white box, with overflowing content pushing the following sections of the page down. However, as can be seen the lower sections load over the top of the first page white box. I have tried changing the positioning/clears of the various sections but cannot seem to create the necessary movement.
<section class="page1">
<div class="huge-title centered">
<div id='detailsbox'>
<h1 id='eorvtitle'></h1>
<img id='eorvimage' src=''>
<div><p>lots of text lots of text
</div>
</div>
</section>
<section class="page2" id='page2'>
</section>
.page1 {
background: url('../img/bg.jpg')#131313;
background-size: cover;
height: 100%;
position: relative;
}
.huge-title {
position: absolute;
top: -20%;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100%;
height: 180px;
}
#detailsbox {
top: -4em;
width: 75%;
left: 12.5%;
right: 12.5%;
border: 20px solid white;
border-radius: 10px;
background-color: white;
text-align:center;
position: absolute;
float: left;
clear: both;
}
Absolute Positioning does not push containers down. It places itself above or below them based on the z-indexing. You need to enclose your absolute contents inside a relative container to push other containers downwards similar to those in jquery sliders.
you need to change .huge-title and #detailsbox to position:relative;
you can probably get rid of background-size: cover;
also change .huge-title and #detailsbox to the following:
.page1 {
background: url('../img/bg.jpg')#131313;
height: 100%;
position: relative;
}
.huge-title {
position: relative;
top: 20%;
right: 0;
left: 0;
margin: auto;
height: 100%;
}
#detailsbox {
top: -4em;
width: 75%;
left: 12.5%;
right: 12.5%;
border: 20px solid white;
border-radius: 10px;
background-color: white;
text-align: center;
position: relative;
float: left;
clear: both;
}
The proper function of an absolute position is to overlap content. If you want other content to automatically push down then use relative position.
The solution is to create an empty spacer div with float right or left. This would ensure there is space between the two.
Refer this answer
Absolute positioned elements are removed from the main flow of the HTML. That's why it's not pushing the elements below it down. It's now sitting on top of the elements before and after it rather than in between them.
You may want to check this out.
Whether or not absolute positioning makes sense in your case is hard to say without seeing the design you are trying to implement. Using default (aka "static") or perhaps relative positioning will push the other content down below the white box, but without a deign to look at it's hard to tell if that's the real solution.
You can add another empty section between page1 and page2 and give the css below
height: 100%;
Adding an empty div the size of the absolute entity between the absolute entity and other components may help.
I have the following:
http://jsfiddle.net/L86xV/
The main excerpts are:
HTML
<div id="wrapper">
<div id="innerwrapper">
<div id="nav">
<div id="about" class="menu1">About</div>
<div id="aboutsub">
<div id="team" class="menu2">Team</div>
<div id="experience" class="menu2">Experience</div>
<div id="difference" class="menu2">Difference</div>
</div>
<div id="work" class="menu1">Work</div>
<div id="portfolio" class="menu1">Portfolio</div>
<div id="contact" class="menu1">Contact</div>
</div>
<div id="outerviewer">
<div id="innerviewer">This is where the main text goes.</div>
</div>
</div>
</div>
CSS
#outerviewer {
float: right;
width: 576px;
height: 700px;
background: #63c5ff;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
z-index: 100;
}
#innerviewer {
width: 506px;
height: 630px;
background: white;
position: relative;
top: 5px;
left: 10px;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
outline: 0px solid black;
padding: 25px;
}
.menu2 {
position: absolute;
background-image:url('../img/BTF_Tab_Sub.png');
background: purple;
width: 80px;
height: 42px;
left: 100px;
cursor: pointer;
}
It was my hope that the items with the class menu2 would act like those with menu1 and change cursor to the pointer. However, they don't, and adding javascript to the buttons returns no events.
I've tried messing with z-index to no avail, can anyone suggest why the menu2 items aren't clickable and how I can fix it?
Re: position:relative;, the z-index is only applied to positioned elements (relative, absolute or fixed).
The w3 wiki makes a note that z-index
• Only works on positioned elements(position: absolute;, position: relative; or position: fixed;).
And the w3 CSS2 spec states that z-index
Applies to: positioned elements
It seems I had to set
#outerviewer
{
position: relative;
}
I don't know why, but if someone explains it well enough, I will give them the tick to help others know why.
Updated fiddle
You had a negative z-index on the sub-menu.
My changes:
#about {
z-index:0;
}
#aboutsub {
z-index: 1;
}
#innerviewer {
z-index:10;
}
When I take out z-index: -1 in the aboutsub div, the desired cursor shows on the purple submenu.
I'm having trouble floating a div over an image. Here is what I am trying to accomplish:
.container {
border: 1px solid #DDDDDD;
width: 200px;
height: 200px;
}
.tag {
float: left;
position: relative;
left: 0px;
top: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
}
<div class="container">
<div class="tag">Featured</div>
<img src="http://www.placehold.it/200x200">
</div>
In this image:
I want the "Featured" box to float over top of the image but instead it seems to "clear" the float and cause the image to wrap to the next line, as though it was displaying as a block element. Unfortunately, I can't figure out what I am doing wrong. Any ideas?
Never fails, once I post the question to SO, I get some enlightening "aha" moment and figure it out. The solution:
.container {
border: 1px solid #DDDDDD;
width: 200px;
height: 200px;
position: relative;
}
.tag {
float: left;
position: absolute;
left: 0px;
top: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
}
<div class="container">
<div class="tag">Featured</div>
<img src="http://www.placehold.it/200x200">
</div>
The key is the container has to be positioned relative and the tag positioned absolute.
Change your positioning a bit:
.container {
border: 1px solid #DDDDDD;
width: 200px;
height: 200px;
position:relative;
}
.tag {
float: left;
position: absolute;
left: 0px;
top: 0px;
background-color: green;
}
jsFiddle example
You need to set relative positioning on the container and then absolute on the inner tag div. The inner tag's absolute positioning will be with respect to the outer relatively positioned div. You don't even need the z-index rule on the tag div.
Actually just adding margin-bottom: -20px; to the tag class fixed it right up.
http://jsfiddle.net/dChUR/7/
Being block elements, div's naturally have defined borders that they try not to violate. To get them to layer for images, which have no content beside the image because they have no closing tag, you just have to force them to do what they do not want to do, like violate their natural boundaries.
.container {
border: 1px solid #DDDDDD;
width: 200px;
height: 200px;
}
.tag {
float: left;
position: relative;
left: 0px;
top: 0px;
background-color: green;
z-index: 1000;
margin-bottom: -20px;
}
Another toue to take would be to create div's using an image as the background, and then place content where ever you like.
<div id="imgContainer" style="
background-image: url("foo.jpg");
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-mox-background-size: cover;
-o-background-size: cover;">
<div id="theTag">BLAH BLAH BLAH</div>
</div>
You've got the right idea. Looks to me like you just need to change .tag's position:relative to position:absolute, and add position:relative to .container.
You can achieve this with relative position.
But why isn't your code working?
An element with position:relative keeps it's position and also still affects all other following elements. That's the reason why your div won't overlap the image by just using z-index.
You'll still need to position the div element with, for example: top:-28px where the amount would be the height of the element with tag class.
Note: top has no effect on non-positioned elements. It works with absolute, relative and sticky.
If you add top:-28px to the tag element it will only overlap the image if the z-index it has a higher number. This is the importance of z-index in this case.
.container {
width: 200px;
height: 200px;
}
.tag {
position: relative;
z-index: 1;
float: left;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
background-color: #92AD40;
}
img{
position:relative;
z-index:0;
top:-28px;
}
<div class="container">
<div id='tag' class="tag">Featured</div>
<img id='img' src="https://i.stack.imgur.com/rUDax.png">
</div>
If you want to play a bit with this concepts
I added some JS code to toggle between different styles
const tag = document.getElementById('tag')
const img = document.getElementById('img')
const label1 = document.getElementById('label1')
const label2 = document.getElementById('label2')
function togglePosition(){
if(!tag.style.position){
tag.style.position = 'relative'
img.style.position = 'relative'
label1.innerHTML = 'Relative position added'
}
else{
tag.style.position = null
img.style.position = null
label1.innerHTML = 'Add relative position'
}
}
function toggleZindex(){
if(!tag.style.zIndex){
tag.style.zIndex = '1'
img.style.zIndex = '0'
label2.innerHTML = 'z-index (1 and 0) added to elements'
}
else{
tag.style.zIndex = null
img.style.zIndex = null
label2.innerHTML = 'Add z-index to elements'
}
}
.container {
margin-top:20px;
width: 200px;
height: 200px;
}
.tag {
float: left;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
background-color: #92AD40;
}
img{
top:-28px;
}
<input type='checkbox' onclick='togglePosition()'/>
<label id='label1'>Add relative position</label>
<br/>
<input type='checkbox' onclick='toggleZindex()'/>
<label id='label2'>Add z-index to elements</label>
<div class="container">
<div id='tag' class="tag">Featured</div>
<img id='img' src="https://i.stack.imgur.com/rUDax.png">
</div>
you might consider using the Relative and Absolute positining.
`.container {
position: relative;
}
.tag {
position: absolute;
}`
I have tested it there, also if you want it to change its position use this as its margin:
top: 20px;
left: 10px;
It will place it 20 pixels from top and 10 pixels from left; but leave this one if not necessary.
I'm tidying up another developer's work who seems to have done a shoddy job with the CSS.
There is the main "wrapper" div on the page, and inside this is a logo and images for the navigation. The images are using "position: absolute" and using the CSS "top" property to offset them. However, Firefox and IE seem to start their offset from a different point, meaning the logo is about 100px above where it should be in IE.
Is this an IE CSS bug or known thing?
Example in question: http://barry.cityjoin.com/mccamb/
If you want to position elements absolutely within a wrapper using top, right, bottom and/or left, the position of the wrapper has to be set as relative explicitly. Otherwise the absolute elements will get positioned within the view port instead.
A little working example:
<style>
.wrapper
{
position: relative;
height: 100px;
width: 800px;
}
.absoluteLogo
{
position: absolute;
top: 10px;
left: 10px;
height: 60px;
width: 80px;
}
.absoluteElement
{
position: absolute;
top: 80px;
left: 320px;
height: 20px;
width: 80px;
}
</style>
<div class="wrapper">
<div class="absoluteLogo">Logo</div>
<div class="absoluteElement">Element</div>
</div>
Another possibility would be to position the absolute elements using margins:
<style>
.wrapper
{
height: 100px;
width: 800px;
}
.absoluteLogo
{
position: absolute;
margin: 10px 0 0 10px;
height: 60px;
width: 80px;
}
.absoluteElement
{
position: absolute;
margin: 80px 0 0 320px;
height: 20px;
width: 80px;
}
</style>
<div class="wrapper">
<div class="absoluteLogo">Logo</div>
<div class="absoluteElement">Element</div>
</div>
The result is the same and should be working across all browsers.