CSS not working with fixed positioning

As part of a school project, I am required to utilize the position fixed property to correctly position the cookie statement at the bottom right of the screen. However, when I attempt to move the element, it does not seem to display properly.

.cookie {
  position: fixed;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  width: 100px;
  height: 50px;
  opacity: 50%;
  float: right;
  background-color: #FA0;
}

.cookie-text {
  color: #FFF;
  text-align: center;
}
<section class="cookie">
  <p class="cookie-text">Cookie statement </p>
</section>
htmlcss

Answer №1

By setting the top, bottom, left, and right positions of an element to 0% (which could simply be 0), you are essentially anchoring it to cover the entire screen.

To position the element at the lower right corner, only specify the right and bottom values.

Since the element is fixed, there is no need for floating. If you want the cookie statement to appear above other elements, add a z-index with a higher value.

You can achieve this layout by using the following CSS:

.cookie {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 50px;
  opacity: 50%;
  background-color: #FA0;
  z-index: 100; // or any value greater than 0
}

Answer №2

Make sure to eliminate the top and Left properties from your CSS styling.

.cookie {
  position: fixed;

  bottom: 0;

  right: 0;
  width: 100px;
  height: 50px;
  opacity: 50%;
  float: right;
  background-color: #FA0;
}

.cookie-text {
  color: #FFF;
  text-align: center;
}
<section class="cookie">
  <p class="cookie-text">Cookie statement </p>
</section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Displaying videos in full screen using HTML5

I am attempting to create a fullscreen webpage with a video using the following code: <video id="backgroundvideo" autoplay controls> <source src="{% path video, 'reference' %}" type="video/mp4"> </video> ...

htmlcsshtml5-video

Using jQuery's toggleClass method to implement CSS transformations

I have a question about this situation Each time the button is clicked, jQuery toggles the class: .transition { background-color: #CBA; transform: translateX(100px) scale(0.5) rotate(180deg); } Within the <div class="container2"> And upon ...

jquerycsstoggleclass

React Sticky sidebar implementation throughout the various components

My goal is to implement a sticky sidebar that moves smoothly across specific components on my webpage. The challenge I am facing is that the CSS 'sticky' property only allows movement within the component it was created in. So, my question is - w ...

cssreactjs

Leverage the power of the General Sibling Selector to easily traverse through deeply nested elements in your

Hi there, I have a query regarding the General Sibling Selector. Let's start by looking at the HTML: <div id="layout-middle"> <div id="Center"> <a class="col Picture1">Title1</a> <a class="col Picture2">Title2< ...

htmlcss

What is the best way to create a stylish outward curve effect for an active sidebar item using just CSS

After spending a week learning frontend designs, I attempted to replicate a design from Dribble. However, I've been struggling with recreating the active style on the sidebar due to the outward curve. If anyone could provide guidance on achieving thi ...

htmlcssuser-interfaceuser-experience

What is the best way to deactivate a button using AngularJS?

$scope.date = moment(currentDate); $scope.date1 = moment(currentDate).add(-1, 'days'); function checkDate(){ if ($scope.date > $scope.date1) { return true; } else{ return false; } }; checkDate(); ...

javascripthtmlangularjs

Creating a responsive single webpage using HTML/CSS

How can I make some div or img responsive for mobile format? <meta name="viewport" content="width=device-width, initial-scale=1" /> <div class="container"> <h1 class="title"> ...

htmlcss

Is it possible to create a form inside a tooltip?

Looking to incorporate a jQuery feature into a form where a simple yes or no question appears upon hovering over it. However, encountering issues getting jQuery to recognize the dynamically created tooltip and submit alert function not working ("$('#w ...

javascriptjqueryhtmljquery-ui

Flexbox not rendering correctly on IE and Chrome browsers

Initially, I avoided using flexboxes because of concerns about older browser support. However, the alternative involved floats, margins, z-indexes, and resulted in a layout that was visually unattractive. Despite setting specific dimensions for the left-h ...

htmlcssflexbox

What is the best way to remove the box-model from an element?

Within my VueJS project, I am faced with nested elements that are generated dynamically like this: <container> <outerElement class="outer" v-for="obj in objects"> <innerElement class="inner" v-for="el ...

htmlcssvue.js

Looking for an element that includes "== $0" right after the closing tag in HTML can be done using Xpath, CSS, or any other locators in Selenium with Python

a link to an image <div class=""><div>Mumbai, Maharashtra</div></div> Take a look at the above example for guidance. I attempted to use the code below but it failed to produce results: driver.find_element(By.XPATH,'//di ...

pythonhtmlseleniumselenium-webdriverweb-scraping

How about combining CSS and jQuery for dynamic image rollovers?

I would appreciate some guidance on this issue. I have an image that, when certain parts of it are hovered over, a word or another picture should pop out. While I feel confident in my ability to achieve the initial effect, I am uncertain about how to make ...

jquerycssimagestyles

How to enable seeking functionality for mp3 files with PHP

I have implemented the following PHP script: video tags are unable to extract metadata from it. Any insights on where I might be going wrong and how to rectify this situation? Your guidance would be greatly appreciated. Thank you.</p> ...

phphtml

Hovering over the top menu items in AngularJS will reveal dropdown submenus that will remain visible even when moving the cursor

I am facing an issue where my top menu has links that display a dropdown of additional menu items upon hovering. I have attempted to use onmouseover and onmouseleave events to control the visibility of the sub menu. However, I have encountered a problem ...

javascripthtmlcssangularjs

Presentation Slider (HTML, CSS, JavaScript)

Embarking on my journey of creating webpages, I am eager to replicate the Windows 10 start UI and its browser animations. However, my lack of JavaScript knowledge presents a challenge. Any help in reviewing my code for potential issues would be greatly app ...

javascripthtmlcss

Setting character limits within textareas based on CSS classes in a dynamic manner

I'm looking to develop a JavaScript function that can set text limits for multiple textareas at once using a class, allowing for flexibility in case specific textareas need to be exempt. However, I'm facing issues with my debuggers - Visual Studi ...

javascriptjquerycssdebugging

To enable the radio button upon clicking the list item in JavaScript, simply check the radio button

I am working with radio buttons Here is the HTML code: <input type="radio" class="first" name="bright" checked> <input type="radio" class="second" name="bright" > <input type=" ...

javascripthtml

Is there a way to adjust the label elevation for a Material UI TextField component?

I am trying to enhance the appearance of a textfield label, but I am facing some challenges with my code. textStyle: { backgroundColor: '#1c1a1a', border: 0, borderRadius: 0, width: 400, height: 66, display: 'flex&a ...

javascriptcssreactjsmaterial-ui

Adding multiple lines of text using jQuery

I am facing an issue while trying to append a string to an HTML element. It works perfectly fine with a single line string, but breaks when I try to split it into multiple lines. <div><h4 >List to do:</h4><span id="added"></span ...

jqueryhtmlstringappend

How was the background design accomplished on this particular website using CSS?

I've noticed that the background on this website scrolls and changes at various points. It transitions from blue to green with clouds moving. I'm curious about what term is used to describe this type of background effect (I don't think it&ap ...

css