I am using the nuxt.js and I have a fixed header which I have a drop-down for changing the languages, but the problem is as I have set a height for header component when I click on the dropdown button it only shows up to that height
you can find the image to problem here:
https://ufile.io/g7tosuph
I have tried giving position: absolute to the drop-down items and also z-index of 9999 but no luck it is still underneath the other components in every page I have also made sure that the styles are note scoped in the .vue files
.header-whole {
background-color: #0e1e25;
position: fixed;
overflow: hidden;
height: 70px;
top: 0;
z-index: 1000;
width: 100%;
}
.lang-items {
position: absolute;
z-index: 9999;
overflow: hidden;
}
Could you provide some sample code?
I guess you have set your <header> position to "fixed", try to set your <header> z-index a z-index value, as well (greater than the <main> z-index value, if any).
Related
I'm using laravel 5.5 and need a footer to be at the bottom of every page.
Currently I have the footer in app.blade.php along with a nav bar and the content coming from other .blade files using yields #yield('content')
the app.blade file has
html, body {
height: 100%;
}
and the footer is
footer {
position: static;
bottom: 0px;
}
When inspecting the page the html and body are 100% height but the footer is just hanging out with the content and not shifting to the bottom of the page.
Are there any larvel related styles that could be interfering with the positioning?
I don't think laravel styling has anything to do with the problem. Setting the positionproperty to static isn't going to give you the results you're looking for, as static is the default position value for almost every html element. You could set it to absolute, fixed or sticky and depending on your choice you might need to set the bottom property on your footer to 0px.
This CSS-Tricks article should give you a better idea of how you want to implement the position and bottom properties on your footer.
Here's an implementation using the fixed value on the footer and a relative value on the body element.
You can also view this codeply project and experiment with changing the footer's position value.
html, body {
height: 100%;
background-color: red;
position: relative;
}
footer {
position: fixed;
left: 0;
bottom: 0;
height: 10%;
width: 100%;
background-color: green;
}
Design question here. How can I make the #main-wrapper slide over the #single-carousel on the following page: http://duijnisveld.wpengine.com/
Right now it moves up when scrolling, I need the carousel to stay put and make the main wrapper slide over it when scrolling down.
giving .header-foto-wrapper position: fixed and #main-wrapper position: relative gives unexpected behaviour for me, I'm clearly missing something important.
*note, in the url, the .header-foto-wrapper does not have the position fixed as it breaks the layout and it's a live site for the client to see.
Thanks!
You'll need to apply width. Things go a little wonky when a container calculates width once you pull it out of the content flow. A width:100% will fill the page width. You'll also want to move the content area down and apply a background color.
.header-foto-wrapper {
position: fixed;
width: 100%;
}
#main-wrapper {
position: relative;
top: 100%;
background: #fff;
}
By setting the position as absolute.
.wrapper {
position: absolute;
left: 100px;
top: 150px;
}
http://www.w3schools.com/cssref/pr_class_position.asp
I am working on testing a site on all browsers before starting device adapting with media queries.
I have found an issue: when any element is dynamically affected, the overflow:hidden property does not work anymore for that element on Chrome.
You can see it here: http://germanalvarez.net/5/
After loading the site, click on the MENU button on the bottom right of the panel, and click on any section:
If you are in Chrome, the top part of the panel (classified as .titlePanel) will no longer remain overflow:hidden, so the overflowed part of the icon will go out of the titlePanel (see image). This only happens when changing section.
If you are in Firefox, even after changing section it will remain hidden, so here, it works OK.
I found a supposed solution on the web: style elements on its tag. If you check my code you'll see .titlePanel has this opening tag, but it doesn't work either:
<div class="panel titlePanel expanded" style="overflow: hidden;">
This is caused by the use of position: fixed :
.titlePanel [class^="icon-"]:before,
.titlePanel[class*=" icon-"]:before {
font-size: 16em;
left: 79%;
line-height: 100%;
margin: 0 0 0 50px;
position: fixed;
}
As you're using fixed, your pseudo-element is totally out of the flow. It's no longer affected by any overflow: hidden on its parents.
To fix it, remove this fixed position and use absolute instead :
[class^="title-"] {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
[class^="title-"] i {
position: absolute;
right: 0;
top: 0;
}
i have this jsfiddle which as you can see when you hover of the Link the Hidden link should display but because of the position absolute it doesnt. Any idea how to make the link display without changing the position: absolute
I tried z-index to no go
The hidden link has position: absolute; and top: 100%;, so it displays 100% from top (thats why scrollbar appears after hover). Change the top property to something different and you will see the result.
The link are displayed, but in the bottom of the page, if you change the CSS you must see the link:
.wrapper .nav ul {
display: none;
position: absolute;
width: 200px;
top: 10px;
left: 0;
}
It's actually appearing; however, it's relative to the previous element in the hierarchy that has a relative position.
.wrapper {
height: 33px;
position:relative;
}
I'm not sure which element you want it relative to. In my example, I made it relative to your wrapper.
In your css .wrapper .nav ul {}, you have the top: 100%;. If you change that to say, 100px, it shows. Of course position it where you want by adjusting the pixels.
I am trying to make a simple html site:
http://www.williamcharlesriding.com/test/index3.html
The problem is the buttons, which are png's and I am trying to position over the various areas of the background image, using css like this:
.but1 {
opacity:0;
filter:alpha(opacity=0);
position:fixed;
top:463px;
left:36px;
}
However I have noticed in different browsers and depending on the zoom factor the buttons can be way off their intended mark. Any advice on this would be appreciated,
Thanks
Set your .content container to position: relative and change each button div from position: fixed to position: absolute. The relative position on the container will make the absolute position relative to your div, rather than the browser.
.content {
padding: 10px 0;
background-color: #5a5958;
margin-left: auto;
margin-right: auto;
position: relative;
}
I would probably add another class to each, so you could do something like this:
<div class="but but1">
<div class="but but2">
.but { position: absolute; }
.but1 { top: 463px; left: 36px; }
Normalize.css might help, it contains default CSS for all browsers. Be sure to include it before your main CSS. Sorry, as the other answer states the problem is that you are positioning relative to the browser window, not the parent element.