What is the best way to align background shapes within a specific section on a webpage using CSS?

I've been attempting to strategically place multiple shapes in the background using CSS, but I'm facing challenges. While I was successful with my hero section at the top of the page, positioning elements in a section halfway down has proven problematic. Whenever I set 'absolute' on the parent and 'relative' on the child, the elements end up aligning at the top.

For instance, I aim to position my first square 12% from the top and 23% from the left within the section container. Subsequently, I intend to scatter the remaining squares randomly across the page at other percentage points.

Here is a snippet of my code:

.features-section {
  height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.features-section li {
  height: 50px;
  width: 50px;
  border-radius: 5%;
  display: block;
  list-style: none;
}

.features-section li:nth-child(1) {
  top: 12%;
  left: 23%;
  background: #ffa299;
  opacity: 0.5;
}
<section class="features-section">
  <ul class="features-animation-list">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</section>

The remaining shapes will be styled as li:nth-child(2), (3), etc., so only one example is included here.

Any suggestions on how to better achieve this layout?

htmlcss

Answer №1

.features-section {
  height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /*Setting relative postion to parent*/
}

.features-section li {
  height: 50px;
  width: 50px;
  border-radius: 5%;
  display: block;
  list-style: none;
  position: absolute; /* Setting absolute position to child*/
}

.features-section li:nth-child(1) {
  top: 12%; 
  left: 23%;
  background: #ffa299;
  opacity: 0.5;
}

.features-section li:nth-child(2) {
  top: 12%; 
  left: 40%;
  background: #ffa299;
  opacity: 0.5;
}
<section class="features-section">
  <ul class="features-animation-list">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</section>

Answer №2

To achieve the desired layout, make sure to use position: relative for the parent elements and position: absolute for the child elements. Here is a sample code snippet for your reference:

.features-section {
  height: 500px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.features-section li {
  height: 50px;
  width: 50px;
  border-radius: 5%;
  display: block;
  list-style: none;
}

.features-section li:nth-child(1) {
  top: 12%;
  left: 23%;
  background: #ffa299;
  opacity: 0.5;
  position: absolute;
}

.features-section li:nth-child(2) {
  top: 50%;
  left: 53%;
  background: #ffa299;
  opacity: 0.5;
  position: absolute;
}

.features-section li:nth-child(3) {
  top: 75%;
  left: 73%;
  background: #ffa299;
  opacity: 0.5;
  position: absolute;
}

.content {
  height: 100px;
}
<div class="content"> hello
</div> 
 
 <section class="features-section">
  <ul class="features-animation-list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </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

Assistance is required to navigate my character within the canvas

Having trouble getting the image to move in the canvas. Have tried multiple methods with no success. Please assist! var canvas = document.getElementById("mainCanvas"); canvas.width = document.body.clientWidth; canvas.height = document.body.clientHeight; ...

javascripthtml

Hide the cursor when the text box is in focus

Is there a way to remove the cursor from a textbox when it is clicked on? I want the cursor to disappear after clicking on the textbox. jQuery(document).ready(function($) { $(function(){ $('#edit-field-date-value-value-datepicker-popup-0&ap ...

jqueryhtml

What's the best way to refresh append() functionality within a modal? I'm currently working with NODE JS and AJAX and

Whenever I click the modal, the append() calls are adding HTML content. But if I try to use empty() or html(), the modal stops appearing altogether. What is the correct approach to creating this modal? function loadModalContent(id) { $('#myModal& ...

javascriptjqueryhtmlajaxnode.js

Refreshing Div Element with PHP AJAX POST请求

It's me again. I'm feeling really frustrated with this code, it's starting to get on my nerves. I don't mean to keep bothering you, but I finally figured out where the issue was in the code and now I just need a little help with the fin ...

phpjqueryhtmlajax

JavaScript problem with hovering action causing additional buttons to appear

Currently, I am developing a user interface where, upon hovering over an LI element, 2 buttons appear to provide additional functionality - "edit" and "remove". However, I am facing challenges with the mouse hit zones. The mouseover function works effect ...

javascripthtmlcsshovermouseover

What steps can be taken to create a two-column layout using the provided HTML code?

I'm having trouble getting my CSS to work properly in IE 8. Any suggestions on how to fix this? Here's the simplified HTML code I'm using: <div id="column-content"> <div id="content"> <p>This is some text</ ...

htmlcss

"Rotated element in Opera does not maintain event functionality when positioned outside its

Make sure to test this example on Opera (version 12.02) by clicking this link. In Opera, try clicking the red box inside the blue box (event is triggered), then click the red box outside the blue box (event isn't triggered). The container must have p ...

cssrotationopera

Issues concerning the customization of error messages in forms are arising

Summing it up, upon form submission, error messages appear beneath each input field with invalid values. Utilizing Zend_Form results in the following markup: <form enctype="application/x-www-form-urlencoded" method="post" action="/auth/register">< ...

htmlcss

Using TypeScript, you can replace multiple values within a string

Question : var str = "I have a <animal>, a <flower>, and a <car>."; In the above string, I want to replace the placeholders with Tiger, Rose, and BMW. <animal> , <flower> and <car> Please advise on the best approach ...

javascripthtmlangulartypescriptangular5

I am experiencing issues with the functionality of the jQuery function

I am currently diving into the world of jquery. I put together a script, but unfortunately it's not functioning as expected. 1 Here is a snippet of my HTML code <ul id="recur" class="elasticstack"> <li id=<?=$item['id']?> ...

phpjqueryhtml

Leveraging the combination of <Form>, jQuery, Sequelize, and SQL for authentication and navigation tasks

My objective is to extract the values from the IDs #username-l and #pwd-l in an HTML form upon the user clicking the submit button. I aim to compare these values with those stored in a SQL database, and if they match exactly, redirect the user to a specifi ...

javascriptjqueryhtmlsqlsequelize.js

Customize the appearance of an ASP link button within a navigation menu

Just getting started with ASP.net and CSS, I want to customize my link button using CSS similar to other <a href> buttons, but I seem to be running into some issues. This is the code for my menu: <div id="templatemo_menu"> <ul ...

htmlasp.netcss

Initiate an Ajax call to pre-fetch video content

I've been attempting to download a video from my own source and display a loading message while it's being downloaded. Once the download is complete, I want to hide the loading icon and have the video ready for playback. My issue lies in gettin ...

javascriptjqueryhtmlajaxvideo

Adjusting the text color of cells in a table based on their values using Ruby on Rails

I have a cell within a table that is formatted like this: <td><%= play_result.timestamp.strftime("%H:%M:%S") + ' ' + play_result.status + ':' + ' ' + '[' + play_result.host + ']' + ' ' ...

cssruby-on-rails

Web pages that dynamically update without the need for reloading

Recently, I stumbled upon slack.com and was immediately captivated by its user interface. For those unfamiliar with it, navigating the site is quite simple: There's a sidebar on the left and a main content area on the right. When you click on an item ...

javascripthtmlcssnode.jsmeteor

Issue with website header disappearing

I'm currently struggling with an issue - I can't seem to pinpoint the problem. The header of a website template is functioning perfectly in 1280*800 resolution, but it's breaking on larger monitors (1900*1440). The header consists of three d ...

htmlcssheader

Strange Data List Phenomenon

Presented here are two distinct datalists, one containing patient filenumbers and the other containing states. <input type="list" class="form-control" name="patient" list="patient-list" placeholder="Enter Patient file number"> <datali ...

htmlinputhtml-datalist

Creating a persistent footer in a modal: A step-by-step guide

I'm currently working on a react-modal that slides in from the bottom of the screen with an animated effect. The challenge I am facing is getting the footer of the modal to stay fixed at the bottom of the browser window. Despite using the standard CSS ...

htmlcssreact-modal

When the mouse hovers over the slider, the final image jumps into view

After successfully building an image slider that displays 2 partial images and 1 full image on hover, I encountered a bug when setting the last image to its full width by default. This caused a temporary gap in the slider as the other images were hovered o ...

javascriptjqueryhtmlcss

Having trouble with the find method when trying to use it with the transform

In my code, I have three div elements with different values of the transform property assigned to them. I store these elements in a variable using the getElementsByClassName method and then try to find the element where the value of the transform property ...

javascriptcss