What is causing this div, which has a selector with a fixed position, to be unable to modify its left property?

I'm having trouble understanding why the css selector holder2 in my html file, with a fixed position, won't allow me to change its left property. It seems like I can only adjust the top property. If I attempt to modify the value of the left property, the div remains in the same position.

#translucent {
  background-color: orange;
  opacity: 0.5;
}

.holder2 {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 2;
  border: 3px solid red;
  top: 70px;
  left: 180x;
}

.holder {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 2;
  border: 3px solid red;
  top: 70px;
  left: 190px;
}

.frame {
  width: 128px;
  height: 128px;
}

.bar {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 40px;
  border: 3px solid green;
}
<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <h1>The opacity Property</h1>
  <div class="holder2">
    <img style="" src="http://gallery.raccoonfink.com/d/7003-2/alien-head-128x128.png">
    <iframe class="frame" id="translucent"></iframe>
    <div class="bar" id="2">

    </div>
  </div>

  <div class="holder">
    <iframe class="frame" id="translucent"></iframe>
    <div class="bar" id="1"></div>
  </div>

</body>

</html>

Answer №1

Small mistake in the code.

Substitute

left:180x;

to

left:180px;

Answer №2

Make a simple correction by changing 180x to 180px in the holder2 class. It's just a minor typo mistake.

#translucent {
  background-color: orange;
  opacity: 0.5;
}

.holder2 {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 2;
  border: 3px solid red;
  top: 70px;
  left: 180x;
}

.holder {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 2;
  border: 3px solid red;
  top: 70px;
  left: 190px;
}

.frame {
  width: 128px;
  height: 128px;
}

.bar {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 40px;
  border: 3px solid green;
}
<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <h1>The opacity Property</h1>
  <div class="holder2">
    <img style="" src="http://gallery.raccoonfink.com/d/7003-2/alien-head-128x128.png">
    <iframe class="frame" id="translucent"></iframe>
    <div class="bar" id="2">

    </div>
  </div>

  <div class="holder">
    <iframe class="frame" id="translucent"></iframe>
    <div class="bar" id="1"></div>
  </div>

</body>

</html>

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

right-floating table header with no text wrapping

Struggling with aligning an element to the right within a table header cell. Despite trying both bootstrap and plain html, I am still encountering wrapping issues. I simply need a table header where I can place an icon on the right side. I experimented w ...

Is the code generated by Webflow.com functional and practical?

Recently, I have discovered the wonders of www.webflow.com for creating an admin layout. It excels in generating a flexbox layout based on my PSD design without requiring me to manually code with Gulp. My plan is to further simplify the process by breaki ...

Title vanishes when gradient is added to a div

I have encountered an issue with a recent update on my webpage. Previously, I had multiple divs with the title attribute that displayed information when users hovered over them. However, after adding a gradient background, the titles stopped appearing. Th ...

Display only the labels of percentages that exceed 5% on the pie chart using Chart JS

I'm currently diving into web development along with learning Chart.js and pie charts. In my project, the pie chart I've created displays smaller percentage values that are hardly visible, resulting in a poor user experience on our website. How c ...

How to identify the position of an element while scrolling using JavaScript/jQuery

Trying to determine the distance between an element and the top of the window document. After initial value is retrieved during scroll event, it remains unchanged. How can this value be continuously tracked as the page scrolls? JS: $(function() { $(wi ...

Generating a hyperlink to a specific user ID within a data table

I'm facing an issue with the formatting of my simple table when trying to navigate to user.id. Is there a better approach to this or should I consider moving LinkToUser? All styling has been removed to avoid any conflicts. import styled from 'st ...

Transition smoothly with a gradual fade-out effect

I implemented a hover effect on my button with the intention of making the button background transparent gradually when hovered over. However, I am encountering difficulties in achieving the desired transparency... I opted for ease-in as the transition di ...

Different Ways to Conceal a Div Element Without Using Jquery

One interesting feature of my website is that users can select audio from a drop-down box, triggering the $.post function to display an auto-playing audio player in a div. However, I'm facing a problem because I don't want the audio player to be ...

rely on a fresh event starting at one

Despite my limited knowledge in javascript, I managed to create a simple js calendar that I am quite proud of. However, I have been facing a challenge for the past few days. You can view my calendar here: https://jsfiddle.net/ck3nsemz/ The issue I'm ...

Other options for setting a background image in HTML emails aside from utilizing the background-img URL and avoiding the use of divs

I am struggling with creating the header section for an HTML email that is currently under construction. I am using background-img url for the image with content overlay, but unfortunately Outlook 2007, 2010, and 2016 do not support background-images on ta ...

What has caused the space between these articles?

I have created a section containing three articles and I am confused about the margin/padding between the articles: This is my HTML code: <section id="home"> <article> <h1>Overview</h1> </article> <article> <h1& ...

Is there a way to use jQuery to toggle a child element when the parent is clicked?

There are three images displayed on a webpage, each accompanied by a list of three events. The desired functionality is that when a user clicks on an event, the corresponding information should be displayed below that event. Below is the HTML structure: & ...

Show a pop-up form when a user focuses on it using React

Hello, I have been looking for a way to create an overlay with a form that appears when a specific input field is clicked. I am trying to achieve this using React. Can someone please advise me on how to accomplish this? Here is my code import React, { Co ...

Disabling the strong pressure effect on Safari for iPhone 6s: A step-by-step guide

How can I prevent the peak effect (strong pressure's impact with Safari on iPhone 6s) on the "a" element in this code (bootstrap environment)? <article> <div class="gall-thumbnail"> <a data-toggle="modal" href="mod1#"> ...

The ul media queries have malfunctioned

In the .gallery section, there are 12 li elements that contain images. Originally, I used media queries to adjust the number of columns in the grid to 6, 4, 3, and 2 based on the browser width. However, when I tried to create a size ratio of 2:1 for all ...

A step-by-step guide on retrieving information from a span and em element with Beautiful Soup

Currently, I am developing a code that is responsible for extracting data from various web pages. # Here's the content of task.py import requests from bs4 import BeautifulSoup url = ('https://www.naukri.com/job-listings-Python-Developer-Cloud-A ...

Trouble arises in next.js containers when their content exceeds the specified limits due to @media rules adaptation

I've been working tirelessly for the past 2 days to resolve an issue with my next.js project. This is my first time using this technology and I feel like I might be overlooking something crucial. The problem revolves around three layers (as seen in t ...

Displaying the HTML code for a dynamically generated table

Can the generated HTML code be retrieved when dynamically creating a table using v-for loops in Vue? <table> <tr> <th colspan="99">row 1</th> </tr> <tr> <th rowspan="2">row 2< ...

Set the color of the text in the Material UI pagination component to a subtle shade

I would like to customize the color of the text in Material UI's pagination component. Specifically, I want the action button to be white and the text portion to be grey, similar to the left action arrow in the image below. Is there a way for me to ac ...

Setting the table's float property to left will prevent the colspan attribute from functioning

I want to implement a colspan in my table with this specific CSS styling. tr { display: block; float: left; } th, td { display: block; border: 1px solid black; } I have experimented with using colspan and rowspan, but it only seems to cover one column ...