I'm using google icons. But when scrolling the page, the icon position is in front of the navbar.
Icon position is using relative position because I want the icon position vertically centered, but it makes the icon located in front of the navigation bar when scrolling, I want the icon located behind the navbar. This is the screenshot of the website
#navbar {
overflow: hidden;
background-color: #151b54;
color: #fff;
position: sticky;
top: 0;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
i.material-icons {
position: relative;
top: 4.5px;
padding: 2px;
padding-right: 6px;
}
/* only to simulate scrolling */
#tri>div~div {
padding-bottom: 2000px;
}
<section id="navbar">
<a class="active">Home</a>
Site Map
FAQ
Article
</section>
<section id="main-home">
<div id="tri">
<div>
<h1>ARTICLE</h1>
<p>Interesting articles by Dustin Ivander</p>
</div>
<div style="text-align:right;">
<a href="./article/home">
<h3>Go to ARTICLE<i class="material-icons">arrow_forward_ios</i></h3>
</a>
</div>
</div>
</section>
Use a negative z-index on i.material-icons
#navbar {
overflow: hidden;
background-color: #151b54;
color: #fff;
position: sticky;
top: 0;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
i.material-icons {
position: relative;
top: 4.5px;
padding: 2px;
padding-right: 6px;
z-index: -1;
}
/* only to simulate scrolling */
#tri>div~div {
padding-bottom: 2000px;
}
<section id="navbar">
<a class="active">Home</a>
Site Map
FAQ
Article
</section>
<section id="main-home">
<div id="tri">
<div>
<h1>ARTICLE</h1>
<p>Interesting articles by Dustin Ivander</p>
</div>
<div style="text-align:right;">
<a href="./article/home">
<h3>Go to ARTICLE<i class="material-icons">arrow_forward_ios</i></h3>
</a>
</div>
</div>
</section>
What you should do is add z-index:-1 to your style sheet for anything that you want to stay on top.
i.material-icons {
position: relative;
top: 4.5px;
padding: 2px;
padding-right: 6px;
z-index: -1;
}
You can include z-index for the icon, and make its position to be relative. The higher the number of z-index, the higher the object will be placed on z-axis.
For instance, an icon with z-index:2 will be placed on top of another icon with z-index:1. Make sure to position the element in order for z-index to function. [You may refer to this image for better illustration]
Related
I am trying to make a simple portfolio website and I want two tags at the bottom of the screen whenever I navigate down or up the page. So for example, if I am at the top of the page it says my name with three links, "About Me", "My Work", and "Contact". If I click on "About Me" it will navigate me down the page to where I have that section. Then this is where I need help, I want "My Work" and "Contact" at the bottom for easy navigation. I have been trying to figure this out for hours now which is why I am now asking a question on here. I am new to web programming so excuse me. Here is some of my code that is relevant.
#container {
padding-top: 100vh;
width: 100%;
height: 100vh;
color: white;
}
#container div {
position: relative;
width: 100%;
height: 100%;
}
/* Styling for each indivual link (About Me, My Work, Contact) */
#container div#AboutMe {
background: white;
color: black;
font-family: Helvetica;
font-weight: lighter;
text-align: center;
font-size: 21px;
}
#AboutMe p {
padding-right: 60%;
padding-left: 10%;
padding-top: 5%;
}
.animatedButtonBody span {
cursor: pointer;
display: inline-block;
position: relative;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.animatedButtonBody span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.animatedButtonBody:hover span {
padding-right: 25px;
}
.animatedButtonBody:hover span:after {
opacity: 1;
right: 0;
}
<div id="container">
<div id="AboutMe">
<h1>About Me</h1>
<p>
This is where some text will go.
</p>
<span>My Work</span>
<span>Contact</span>
</div>
</div>
You can try position:fixed. Also you should tidy up your html elements (wrap things in div, etc.)
Example:
.nav {
height: 60px;
background-color: grey;
}
.content{
height: 500px;
background-color: lightgreen;
}
.footer{
height: 60px;
width: 100%;
background-color: black;
position: fixed;
bottom: 0px;
}
<div class = "container">
<div class = "nav">
</div>
<div class="content">
</div>
<div class = "footer">
</div>
</div>
Hope it helps
I figured out the answer to my problem. Here is what I added to my tags.
#pinButton1 {
position: absolute;
bottom: 0;
transform:translateX(-100%)
}
#pinButton2 {
position: absolute;
bottom: 0;
transform:translateX(0%)
}
<span>About Me</span>
<span>Contact</span>
Not tested, but you can try it. You need an element with "position:fixed", this way it stays on the screen when scrolling.
<style>
.float-container {
position: absolute;
bottom: 0;
}
.about-me {
position:fixed;
}
</style>
<div class="float-container>
<div class="about-me">
<p>Some Content</p>
</div>
</div>
You should check out position:fixed and position:absolute.
Link to W3Schools: HERE
You didn't clarify what does "at the bottom" mean, therefore I give 2 examples. This is how I understood your question.
If you need buttons to be always in viewport at the bottom of the screen use this example with custom values. Here you have an example how to center an item at the bottom center of the viewport.
#example{
position:fixed;
bottom:0;
left:50%;
transform:translateX(-50%)
}
If you need an item to be at the bottom of the page use
#example{
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%)
}
I'm finishing a webpage using wordpress as a CMS. and my client asked me to put an image/button at the very top of the page.aligned to the main navigation menu.
That's OK, I did it but what happened is this:
when I use different screen resolution, the buttons do not stay aligned with the very top of the page
I've tried to use "Position: fixed", but with that, the buttons move with the page and I want them to stay at the top of the page and don't scroll along with the page.
How can I do that? Can someone help me? Thanks!!!
.buttons {
position: absolute;
left: 85%;
z-index:905;
margin-top:0
}
.buttonLang {
position: relative;
z-index: 910;
}
.buttonZone {
position: relative;
z-index: 915;
top: -107px;
left: 100px;
}
.selectLang {
display: none;
position: absolute;
left: 0;
bottom: 5px;
right: 0;
background-color: rgba(0,0,0,1);
}
#buttonLang:hover img {
opacity: 1;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: /*#2893CC;
*/#FFFFFF;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,1);
padding: 12px 16px;
z-index: 1;
font-family: Calibri;
}
.dropdown:hover .dropdown-content {
display: block;
line-height: 200%;
}
</head>
<body>
<body bgcolor="#E1E1E1">
<div class="buttons">
<div class="buttonLang">
<div class="dropdown">
<img src="http://www.jourdan.org.br/wp-content/uploads/button-lang.png" alt="" title=""/>
<div class="dropdown-content">
<img src="http://localhost/wp-content/uploads/2016/10/flag-bra.png" width="30"alt="" title=""/> Português</br>
<img src="http://localhost/wp-content/uploads/2016/10/flag-esp.png" width="30"alt="" title=""/> Español</br>
<img src="http://localhost/wp-content/uploads/2016/10/flag-usa.png" width="30"alt="" title=""/> English
</div>
</div>
</div>
<div class="buttonZone">
<img src="http://www.jourdan.org.br/wp-content/uploads/button-sgvzone.png" alt="" title=""/>
</div>
<!-- begin snippet: js hide: false console: true babel: false -->
Add this to your CSS:
.post > .post-content > .wpb_row > .wpb_column {
position: static;
}
.buttons {
position: absolute;
right: 10%;
top: 0;
z-index: 905;
margin-top: 0px;
}
However I don't understand why you don't move the buttons HTML into the header. When you resize the browser, the buttons overlap the navigation and this can't be corrected with just a few lines of CSS.
Try position: absolute; instead. Also top: 0px; should keep it stuck there.
body{position :relative;} .button{position:absolute; top:0px; left:10px;}
Align them to the right instead of left :)
.buttons {
position: absolute;
right: 10%; /* for example, adjust how you need */
z-index:905;
margin-top:0
}
I want to have a list of Font Awesome icons on the outer bottom side of a Bootstrap column. Currently I have positioned them absolutely and when I set bigger width or bigger padding on hover that icon will grow bigger to the left, while I want it to go on the right.
How do I set it to go on the right, and also how to stop second element from reacting? That feature isn't planned :)
If someone has a better idea how to set it different I would be glad to hear.
http://codepen.io/filaret/pen/ORNmPZ
ul {
position: absolute;
bottom: 60px;
right: -50px;
li {
a.btn {
width: 50px;
height: 46px;
display: block;
&:hover {
width: 100px;
padding-left: 50px;
}
}
}
}
<div class="col col-md-8">
... content ...
<ul class="share-buttons-outside list-unstyled">
<li>
<a class="btn" href="#">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
...
</ul>
</div>
Instead to position relative to right edge, do position from left:
ul {
left: 100%;
/* REMOVE right: -65px */
}
You could add a margin to correctly position it:
ul li a.btn:hover {
width: 100px;
margin-right: -50px;
padding-left: 50px;
}
This appears to correct the issue of one interacting with the other also.
Working codepen: http://codepen.io/sol_b/pen/xEVdgj
You could set a left value, instead of right:
ul {
position: absolute;
bottom: 60px;
left: 758;
...
Maybe this simple solution is enough. Instead of
right: -50px;
do
left: 760px;
You could use position: absolute; on your li elements:
Codepen
li {
border: 0;
position: absolute;
left: -50px;
top: -46px;
&:nth-child(2) {
top: 0;
}
}
I have a big image with a dark overlay covering the front of my webpage. I want to add a div filled with bright text on top of the overlay.
Is there a way to position the div so as to exclude it from the overlay?
HTML:
.overlay {
position: absolute;
background-color: rgba(0, 0, 0, 0.45);
top: 70px;
left: 0px;
right: 0px;
bottom: -200px;
z-index: 1;
}
.about-us {
background-image: url("img.jpg");
width: 1100px;
height: 731px;
display: block;
position: relative;
}
<div class="about-us">
<div class="overlay">
<div class="intro">
<h2>Catchy title</h2>
<p>Small Para</p>
<h1>More txt</h1>
</div>
</div>
</div>
Something like this:
h2 {
background-color: white;
z-index: 2;
}
Assuming that was what you wanted on top.
Use a pseudo element instead of an overlay element.
.about-us:before {
content:"";
position: absolute;
background-color: rgba(0,0,0,0.45);
top: 70px;
left: 0px;
right: 0px;
bottom: -200px;
}
Also you need to explicitly specify position property for intro element in able to interact with the content:
.intro {
position: relative;
}
See example here
I am trying to make my text appear ontop of my background image. I have tried playing around with the z-index and positioning, but cannot seem to get it right.
Here is my HTML:
<div id="float-left">
<div id="triangles">
<img src="img/trianglebackground.png" id="tripic">
</div>
<div id="float-left-text">
<img src="img/portrait.png" id="port">
</div>
</div>
Here is the CSS I have currently:
#tripic {
z-index:1;
height: 550px;
width: 500px;
text-align: center;
opacity: 0.2;
position: relative;
}
#float-left {
float: left;
/*background: url('img/trianglebackground.png') no-repeat center;*/
background-size:500px 550px;
background-color: #03C9A9;
height: 550px;
width: 50%;
z-index:0 ;
position: relative;
}
#float-left-text{
text-align: center;
z-index: 100;
position: absolute;
}
#port {
height: 200px;
width: 125px;
}
Right now, the entire #floatlefttext section is below the background image, whereas I would like it to be ontop. I have tried to use background-image, but I am not sure it's going to be the best way to get the results I would like. Any advice would be great, thanks!
I created a fiddle for you here: https://jsfiddle.net/0w1max4f/
#floatlefttext{
text-align: center;
z-index: 100;
position: absolute;
top: 0px;
left: 0px;
}
Is this what you were looking for? Since your html didn't actually include any text elements (just an image) to be placed on top of the background, but hopefully this will help you anyway.
What I did was to clean up your html (you had some tags that were not properly closed, for example the images and some divs) and add top and left to you absolute positioned div.
You were using absolute and relative positioning correctly but forgot to specifiy where the absolute positioned item were supposed to be placed.
here's a good article about positioning if you want to learn more:
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Something like this
<div style="position: relative; background: url(path to image); width: (width)px; height: (height)px;">
<div style="position: absolute; bottom: 0; left: 0.5em; width: 400px; font-weight: bold; color: #fff;">
<p>(text to appear at the bottom left of the image)</p>
</div>
<p style="position: absolute; top: 1em; right: 2em; width: 120px; padding: 4px; background-color: #fff; font-weight: bold; font-size: 11px;">
(text to appear at the top right of the image)
</p>
</div>
Be aware that you should separate the css from the html
Fiddle: Text ontop of an image and linkage
CSS:
div.image-container
{
width: 400px;
}
a.imagewrapper
{
width:inherit;
}
img.theimage{
width:inherit;
}
a.teasertext
{
position: absolute;
padding-top: 1%;
color: #fff;
line-height: 1.2em;
text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
letter-spacing: .02em;
font-size: 1.5em;
overflow-wrap: break-word;
overflow-y: hidden;
-webkit-transition: all .3s;
transition: all .3s;
font-size: 41px;
width:inherit;
}
HTML:
<div>WOOP DE DOO</div>
<div class="image-container">
<a class="teasertext" href="www.stackoverflow.com">Text on the image, wow amazing !</a>
<a class="imagewrapper" href="www.stackoverflow.com">
<img class="theimage" src="http://img.thesun.co.uk/aidemitlum/archive/01667/THUNDER620_1667926a.jpg">
</a>
</div>
<div class="image-container">
<a class="teasertext" href="www.stackoverflow.com">Text on the image, wow amazing !</a>
<a class="imagewrapper" href="www.stackoverflow.com">
<img class="theimage" src="http://img.thesun.co.uk/aidemitlum/archive/01667/THUNDER620_1667926a.jpg">
</a>
</div>
<div>WOOP DE DOO</div>