i would like to get to result of the blue strip in the picture bellow.
Its inside the wrapper so the HTML is like this:
<body>
<div class="wrapper">
<div class="strap"></div>
</div>
</body>
I know its done with z-index. The strap should be visible on the whole page. Thanks for help
Use the following CSS. The code sets the position to absolute and then positions each point of the div to each corner of the window, top, bottom, left and right. Z-index will bring it to the front. Ensure that there are no other elements that use z-index with a greater value than 99. The background color is then set as white with 40% transparency; Adjust the 0.6 to what you need it to be. 0.8 for example would be less transparent.
.strap{
display: block;
position: absolute;
top: 0;
bottom:0;
left:0;
right:0;
z-index:99;
background-color: rgba(255,255,255,0.6);
}
Use the css attribute position absolute and use top,right,left,bottom for alignment. And use z index to make it appear on top of that wrapper make sure the width is 100% ...
Related
This question has been asked and answered in portions, but I can't seem to find an answer in full. I have a responsive div in bootstrap, and I (1) want my canvas to display with the same position and dimensions, and (2) want my text to appear above the canvas.
<div class="col-md-9 content-wrapper>
<canvas id="canvas" resize="true"></canvas>
<p class="statement">Display this text over canvas</p>
</div>
css:
.statement{
position:relative;
top:50%;
transform: translateY(-50%);
}
#canvas{
width:100%; height:100%;
}
Any advice? I know I'll need some sort of position css on the canvas, but I don't know what, and absolute positioning will give me problems with it's responsiveness. I'd also like to stay away from extra javascript for positioning, but if someone could explain a way that won't make it buggy, I'd be open to the suggestion.
Thanks!
You place
position: relative;
On the background div.
Place
Position: absolute;
On the foreground div and position with top, bottom, left, right. The foreground container will work relative to the background, meaning it is responsive, if you set the width of the foreground using %
I have a menu bar that I want to place at the bottom of my screen. I've set the positioning to absolute and the distance from bottom to '0', but for some reason, it won't move from the middle of the screen, regardless of how I try to position it. Can anyone catch what I am doing wrong?
<div class=bmenu>
<img src="bottommenu.gif" width=100% height="39" alt="" />
</div>
<style>
.bmenu
{
position:absolute;
z-index: 2;
bottom:0;
left:0;
width:100%;
}
</style>
Edit:
Several commenters have said that this code places it at the bottom for them. Does this mean that the problem is coming from the way this code fragment is interacting with the rest of the code? Does anyone know what could cause that?
If you use any of the browser's web inspectors, you'll see that the height of your <html> and <body> elements aren't 100%, but auto, which means they'll only be as tall as the content within them expands them to.
What you need to do is set the height of these elements, like so:
html, body {
height: 100%;
}
This will force them to fill the full height of the viewport. The only caveat is that this requires you to define margin-top, margin-bottom, padding-top and padding-bottom on other elements, since margins and paddings will be added on top of the height, which is not what you normally want when defining height (or width, for that matter) in %.
try to use this code:
.bmenu
{
position:fixed;
z-index: 2;
bottom:0;
left:0;
width:100%;
}
I am using JS to write HTML code where I need to display 2 images exactly overlapped.
The height and width of both are same.
What CSS properties can I use to do this?
Position relative on the container, and absolute on the images:
All of the above answers are missing the fact that you need to position a parent element with something other than static, or else you will be positioning them absolute to the browser window, which I presume you do not wish to do.
position: absolute will give your position in the container of the closest parent with some sort of positioning. So we give the parent position:relative; without declaring top or bottom, this way it will be 0px off from where it would normally be (i.e. no change, but still has position declared).
<div id="container">
<img src="data:image/png;base64,R0lGODlhAQABAPAAAC+byy+byywAAAAAAQABAEAIBAABBAQAOw==" style="height:125px; width:125px;">
<img class="hide" src="data:image/png;base64,R0lGODlhAQABAPAAADCQIzCQIywAAAAAAQABAEAIBAABBAQAOw==" style="height:125px; width:125px;">
</div>
#container{
position:relative;
}
#container img{
position:absolute;
top:0;
left:0;
}
.hide:hover{
opacity:0;
}
http://jsfiddle.net/BLbhJ/1/
Edit: Added your hide functionality
Play around with the css in this:
http://jsfiddle.net/zuZxD/
I used opacity to display the overlapping.
<style>
.imageoverlap{
position: absolute;
top:100px;
}
</style>
...
<div class='imageoverlap'>
image1
</div>
<div class='imageoverlap'>
image2
</div>
Try that :D
If you set position to absolute, you can control where you want to place it.
<style>
#overlay{position:absolute; top:0px;}
</style>
<div id="layer1"><img src="img1.png"></div>
<div id="overlay"><img src="overlay_image.png"></div>
Now you need to position #overlay where you want it, by setting top and left positions, i.e., top:0px, left:300px;
I need to position elements and receive like in attached image
I have a page where all elements are inside MainDiv. There are 2 images.
I would wondering if somebody showed my html + css should be.
thanks in advance!
A possible way would be to set the position of the overlayed image to absolute:
#overlayImage{
position:absolute;
right:0px;
bottom:0px;
width:150px;
height:150px;
}
Important is, that the position of the main div is not "static".
<div id="main_div">
<div id="other div"> </di>
<div id="overlayImage"> </div>
</div
you can accomplish this the following way: assign the background image as background to the main div
background: url(some/url/to/image) no-repeat scroll top right transparent;
then add a normal image element inside that div and position it absolute with the folllowing css
right: 0;
bottom:0;
position: absolute;
make sure the main div has position set to relative
I want to create a headline (h2) with an image at the right-most area of the bounding box. I have the layout almost right except I can't push the image a little bit to the right of the element's bounding box -- how would I tweak my css so it is displayed correctly?
I'm trying to do something like this:
[{someHeadLineText}{dynamic space }{image}{5px space}]
where the [] indicate the total available width of my content.
Html:
<div class="primaryHeader">
<h2>News</h2>
</div>
Css:
.primaryHeader h2 {
background-color: green; /* the header looks like a box */
color: black;
background: transparent url(../images/edit.png) no-repeat right center;
border: 1px solid red;
}
I am placing the image to the right of my h2 element and centered vertically -- but how do I adjust the placement of the background image?
I'm afraid I think you can't. You can use either right or a pixel value as the image's x-position but that pixel value will always be relative to the left corner of the bounding box. Adding padding won't help either, it will just extend the bounding box further.
The only solution I know for this is either adding the shift to the image itself, or using an absolutely positioned element (with a slight offset) hovering behind the element - but that would require you know the width and height in advance.
Edit: evil, hacky idea. I have no time to try this out right now, but it should work if the h2 is a display: block.
Give the h2 a position: relative.
Place a div or other element inside the h2 with the following:
position: absolute;
left: 0px;
top: 0px;
right: 5px; /* This is the shift */
bottom: 0px;
background-image: url(...);
background-position: right center;
background-repeat: no-repeat;
z-index: -1; /* I don't know whether this will overwrite the h2's content */
this could lead to the desired effect, I'm not sure as I have not tried.
The element may overlay the h2's other content, in which case you would have to put the rest into a <span> element with position: relative and z-index: 1.
It's really hacky. Better put the padding into the image itself, much cleaner.
Can you add padding pixels in the image itself?
You could ditch the background image and use an image instead.
<div class="primaryHeader" style="padding-right: 5px;">
<img src="../images/edit.png" alt="" style="float: right;" />
<h2>News</h2>
</div>
You can look into CSS3 background positioning. It works in all the modern browsers (not IE, of course).