I'd like the top level div with message "This is a test message" pinned to top so it always on top and overlay the following div even (with black background) when i scroll
The "position: fixed" does not seem to make it work
function App() {
return (
<div>
<div
style={{
top: "0px",
position: "fixed",
width: "100%",
overflow: "hidden"
}}
>
<p>this is a test message</p>
</div>
<div
className="App"
style={{
marginTop: "50px",
height: "2000px",
width: "30px",
background: "black"
}}
></div>
</div>
);
}
I did not have to change anything to your code, I just added a few colors and some height: https://react-zda8ht.stackblitz.io
Link to the editor: https://stackblitz.com/edit/react-zda8ht
Isn't that what you're looking for?
If i understand you correctly, this is something you need
<div id="app">
The APP
</div>
<div id=message>
This is a test message
</div>
#app {
margin: 50px auto 0px auto;
padding: 10px;
width: 300px;
height: 2000px;
background-color: black;
color: white;
}
#message {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
padding: 10px;
background-color: red;
color: white;
}
the jsfiddle example link
.root{
top: 0px;
position: fixed;
overflow: hidden;
width: 100%;
height: 50px;
background: darkcyan;
color:white;
}
.inner{
margin-top: 60px;
height: 1000vh;
width: 30px;
background: black;
}
<div>
<div class="root">
<p>this is a test message</p>
</div>
<div class="inner"></div>
</div>
Related
I'm trying to add color overlay on top of a youtube embed video. I'm using vue-youtube-embed component to embed the video.
.video-player {
border-radius: 10px;
overflow: hidden;
z-index: 1;
height: 360px;
width: 640px;
}
.color-overlay {
height: 360px;
width: 640px;
background: black;
z-index: 999;
overflow: hidden;
}
<div class="video-player mx-auto">
<div class="color-overlay">
<youtube video-id="vT__WcbNWpY"></youtube>
</div>
</div>
The video-player class is used to add rounded corners on the video. The color-overlay does not work as I wanted it and it shows nothing. What should I do?
In your HTML, make the overlay div a sibling of iframe.
Then just use absolute positioning inside your common parent, like so:
.video-player {
position: relative;
border-radius: 10px;
height: 360px;
width: 640px;
}
.color-overlay {
position: absolute;
top: 0;
opacity: 0.5;
height: 100%;
width: 100%;
background: blue;
}
<div class="video-player mx-auto">
<iframe src="https://www.youtube.com/watch?v=vT__WcbNWpY&t=3s&ab_channel=OceanConservationNamibia" width="640" height="360"></iframe>
<div class="color-overlay"></div>
</div>
Add overlay tag outside of div so it can consume all screen and will add overlay on screen. if you need only on iframe just add color-overlay div inside video-player div
.color-overlay {
height: 100%;
width: 100%;
background: blue;
z-index: 999;
overflow: hidden;
opacity: 0.2;
position: absolute;
}
.video-player {
border-radius: 10px;
overflow: hidden;
z-index: 1;
height: 360px;
width: 640px;
}
<div class="color-overlay"></div>
<div class="video-player mx-auto">
<div class="">
<iframe src="https://www.youtube.com/watch?v=vT__WcbNWpY&t=3s&ab_channel=OceanConservationNamibia" width="600" height="300"></iframe>
</div>
</div>
I have 2 div's, one after the other. When i move first div with postion: relative and top: -60px it creates gap between them.
Here is example: https://codepen.io/dusannis/pen/oNgBpoK
As you can see there is gap between red and yellow div. Is there some css property that I can add to parent div that can remove this gap, or something simillar?
This is HTML:
<body>
<div class="container">
<div class="div-1">
<p>something here</p>
</div>
<div class="div-2"></div>
</div>
</body>
This is CSS:
body {
background: blue;
padding: 60px
}
.div-1 {
padding: 60px;
position: relative;
top: -50px;
background: red;
}
.div-2 {
height: 50px;
background: yellow;
}
Use negative margin instead of relative positioning.
body {
background: blue;
padding: 60px
}
.div-1 {
padding: 60px;
/* position: relative; --> not required */
margin-top: -50px;
/* change this */
background: red;
}
.div-2 {
height: 50px;
background: yellow;
}
<div class="container">
<div class="div-1">
<p>something here</p>
</div>
<div class="div-2"></div>
</div>
Codepen Demo of the effects of various methods of "moving" elements:
"Relative Position vs Margin vs Transform".
You can try add same top/position to the second div:
.div-1 {
padding: 60px;
position: relative;
top: -60px;
background: red;
}
.div-2 {
position: relative;
top: -60px;
height: 50px;
background: yellow;
}
Alternatively you can add internal div and use padding for that one, then get rid of padding for the parent and the body (or adjust to the real value if you want it):
<body>
<div class="container">
<div class="div-1">
<div class="div-1-inside">
something here
</div>
</div>
<div class="div-2"></div>
</div>
</body>
body {
background: blue;
padding: 10px;
}
.div-1 {
position: relative;
background: red;
}
.div-1-inside {
padding: 60px;
background: red;
}
.div-2 {
height: 50px;
background: yellow;
}
I have a simple < div > (without fixed hegiht) with a text in it:
<div id="section">
<div class="container">
<h1>text</h1>
<p>More text</p>
</div>
<!-- <div id="overlay"></div> -->
</div>
The CSS for this is something like:
#section {
background: red;
overflow: hidden;
}
It's possibile to add a div with a transparent image background?
The overlay sholud be hover the main red background, but under the text.
I think is something like this, but dont works:
#section #overlay {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100px; /* ??? */
background: green;
opacity: 0.1;
}
#section {
background: red;
display: block;
position: relative;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
text-align: center;
z-index: 9999;
}
#overlay {
position: absolute;
left: 0;
width: 100%;
height: 100%;
top: 0;
background-color: rgba(0,0,0,0.3);
}
If I'm understanding you correctly, how about something like this:
HTML:
<div id="section">
<div id="container">
<h1>My background is transparent!</h1>
<p>More text</p>
</div>
</div>
CSS:
#section {
width: 300px;
background-color: red;
}
#container {
position: relative;
left: 50px;
width: 200px;
text-align: center;
background-color: rgba(0,0,0,0.3);
}
Results here: JSFiddle
If that's not what you wanted, can you be more specific about the positioning?
try below example using jquery ui will reduce the effort
<div id="dialog">Your non-modal dialog</div>
Open dialog
$('#open').click(function() {
$('#dialog').dialog('open');
});
jQuery(document).ready(function() {
jQuery("#dialog").dialog({
autoOpen: false,
modal: true,
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery('#dialog').dialog('close');
})
}
});
});
Code sample on JS Fiddle
The div banner and the ul are having a fixed height.
The elements inside the li tag needs to be vertically middle aligned.
I need "info-wrapper" div to be placed exactly on top of "disp-img-contanier" div.
But since I'm using position=absolute and top=0 the "info-wrapper" div moves up.
Any way in which the desired result could be achieved?
HTML:
<div class="banner">
<ul class="banner-display clearfix">
<li class="first-default">
<div class="disp-img-contanier">
<!--image goes here-->
<img src="http://i303.photobucket.com/albums/nn134/gotitlikethat97/Photography/9973TressDunceCap.jpg" width="292px" height="320px" />
</div>
<div class="info-wrapper">
<div class="info-base">
<h2>Hover Text</h2>
</div>
</div>
</li>
<li class="first-default">
<div class="disp-img-contanier">
<!--image goes here-->
<img src="http://i303.photobucket.com/albums/nn134/gotitlikethat97/Photography/9973TressDunceCap.jpg" width="292px" height="320px" />
</div>
<div class="info-wrapper">
<div class="info-base">
<h2>Hover Text</h2>
</div>
</div>
</li>
<li class="first-default">
<div class="disp-img-contanier">
<!--image goes here-->
<img src="http://i303.photobucket.com/albums/nn134/gotitlikethat97/Photography/9973TressDunceCap.jpg" width="292px" height="320px" />
</div>
<div class="info-wrapper">
<div class="info-base">
<h2>Hover Text</h2>
</div>
</div>
</li>
</ul>
CSS:
.banner {
position: relative;
z-index: 3;
height: 550px;
display: table;
border-collapse: separate;
border-spacing: 10px;
}
.banner .banner-container {
z-index: 3;
height: 550px;
display: table;
border-collapse: separate;
border-spacing: 10px;
width:100%;
}
.banner-display {
width: 920px;
margin: 0 auto;
z-index: 0;
height: 550px;
position: relative;
padding: 0;
display: table-row;
}
.banner-display li {
width: 292px;
display: table-cell;
vertical-align: middle;
padding-top: 5%!important;
height: auto;
position: relative;
overflow: hidden;
}
.disp-img-contanier {
height: 320px;
width: 292px;
vertical-align: middle;
overflow: hidden;
}
.info-wrapper {
display: block;
width: 292px;
height: 320px;
position: absolute;
top: 0;
background: rgba(225, 225, 225, 0.8);
}
To do this, you need to change a little css around a little bit.
.info-wrapper {
width: 292px;
height: 320px;
position: absolute;
top: 50%;
}
.info-base {
position: absolute;
bottom: 50%;
width: 296px;
background: rgba(225, 225, 225, 0.8);
height: 320px;
}
and finally, you need to get rid of the padding top in the list elemenst, so:
.banner-display li {
padding-top:0;
}
This will vertically center the divs. If you need the padding top, you're going to have more trouble, especially if you are basing it off of a percentage. Good luck!
This seems to do the trick:
http://jsfiddle.net/mikelyons/9yfEf/1/
.info-wrapper {
display: block;
width: 292px;
height: 320px;
position: relative;
top: -340px;
background: rgba(225, 225, 225, 0.8);
}
Moving the .info-wrapper upwards 340px relative to its position in the document flow places it directly over the element above it.
Im using a set of layers, with this CSS
.left1 {
float: left;
left: 5px;
width: 72px;
height: 100px;
}
.left2 {
height: 100px;
background-color: red;
margin-left: 186px;
}
.eventCat {
float: right;
width: 5px;
height: 100px;
}
to make inline divs. however, when i add a layer that i wish to be align to the right, it seems to fall below (the green one .eventCat). It should be at the right hand side of the red box! even with float:right; what am i missing?
I made a fiddle.. http://jsfiddle.net/7GBca/ to fiddle with :)
It is not floating correctly because .float2 is not floted, my guess is you want it to expand to fill all available width and that's why you didn't set an explicit width. One solution to align .eventCat correctly would be to use position:absolute; and use right:0;
.wrapper {
position: relative;
}
.eventCat {
position: absolute;
right: 0;
top: 0;
width: 5px;
height: 100%;
}
.left2 {
padding-right: 5px; /*set this to the width of .eventCat so it does not overlap*/
}
Example fiddle
you are missing "width: ...px" and "float: left" of 'left2' and "width: ...px" of 'wrapper'.
The easiest way to fix this is set a negative top margin to your green div:
.eventCat {
margin: -100px 0 0 0;
float: right;
width: 5px;
height: 100px;
}
Example Fiddle
Your issue is fixed, please check the code here:
<style type="text/css">
.eventCat {
float: right;
width: 5px;
height: 100px;
}
.eventIMG {
float: left;
left: 0;
width: 100px;
height: 100px;
}
.left1 {
float: left;
left: 5px;
width: 72px;
height: 100px;
}
.left2 {
height: 100px;
background-color: red;
margin-left: 186px;
}
.set:hover {
background-color: #FFDEAD;
cursor: pointer;
cursor: hand;
}
#event.title {
font-size: 21px;
font-weight: bold;
color: black;
text-decoration: none;
}
#event {
color: black;
}
</style>
and here is your HTML
<div class="wrapper">
<div class="eventIMG" style="background:url('http://hqhq.dk/beta/wp-content/uploads/2013/07/png-5.jpg') no-repeat scroll center center / 100% auto transparent"></div>
<div class="left1">
<div style="text-transform: uppercase;">WED 18.09</div>
<div style="text-transform: uppercase;">kl.22.00</div>
</div>
<div class="eventCat" style="background-color:green;"></div>
<div class="left2" id="event">
<div id="event" class="title"><a class="url" href="http://hqhq.dk/beta/event/fuzz-manta-dron/" title="FUZZ MANTA + DRÖN" rel="bookmark">FUZZ MANTA + DRÖN</a></div>
<div></div>
<div class="">
<p>something here</p>
Find out more » </div>
</div>
</div>
<div class="wrapper">
<div class="eventIMG" style="background:url('http://hqhq.dk/beta/wp-content/uploads/2013/07/png-5.jpg') no-repeat scroll center center / 100% auto transparent"></div>
<div class="left1">
<div style="text-transform: uppercase;">WED 18.09</div>
<div style="text-transform: uppercase;">kl.22.00</div>
</div>
<div class="eventCat" style="background-color:green;"></div>
<div class="left2" id="event">
<div id="event" class="title"><a class="url" href="http://hqhq.dk/beta/event/fuzz-manta-dron/" title="FUZZ MANTA + DRÖN" rel="bookmark">FUZZ MANTA + DRÖN</a></div>
<div></div>
<div class="">
<p>something here</p>
Find out more » </div>
</div>
</div>
What you have to do there is to replace you div.eventCat with div.left2 that's it :-)
Fiddle : http://jsfiddle.net/KRU9U/
Cheers
Put the eventCat (the element you want to float to the right) as the first element under wrapper.