تحريك الصورة إلى أعلى بـ استخدام css

السبب في هذه المشكلة هو طريقة وصولك إلى الصورة ، أنت لم تصل إلى الصورة بشكل صحيح في ملف css لذلك قمت بعمل التعديلات الازمة حتى تستطيع الوصول إلى الصورة . في section الذي له الكلاس main يحتوي بداخله أيضا على إثنين من الوسم div لذلك قمت بإعطاء كل div إلى كلاس معين مثلا title و img-class . هذا في صفحة index .html

<section class="main">
        <div class="title">
            <h1>Welcome, To Khalid World</h1>
            <p>Here Iam gonna share everything about my life. Books Iam reading, Games Iam Playing, Stories and Events
            </p>
           
        </div>
        <div class="img-class">
             <img src="landing-image.png">
        </div>
    </section>

أما في ملف css هذه الطريقة غير صحيحة للوصول إلى الصورة ، كون الصورة في div آخر داخل div الذي له الكلاس main 

.main img {}

لذلك قمت بإعطاء div الذي بداخله الصورة الكلاس img-class حتى أستطيع الوصول للصورة بهذا الشكل 

.main .img-class img{}

لقد قمت بعمل بعض التعديلات هنا في هذه الأقسام في ملف css مختلفة قليلاً يمكنك المقارنة فيها مع ملفك حتى أستطيع التعامل بحرية مع تحريك الصورة . 

.main{
    width: 100%;
    min-height: 150vh;
    background-color: #ECECEC;
}
.title {	
	width:50%;
	float:left;
}
.img-class {
	width:50%;
}
.main .img-class img{
    position: absolute;
    width: 600px;
	top:100px;   
}

 بخصوص تحريك الصورة يمكنك من الخاصية top تحديد الموضع المناسب لك 

أظن أنه لا مشكلة بتموضع الصورة فهي تأخذ حجمها الكامل دون أن تمتلك أية فراغات أو مساحات بيضاء تجعلها تحجز حجما أكثر من الذي تحتاجه. 

يمكنك جعل القسم المجاور ينزل قليلا ليتساويا على حامل المحور الأفقي، يمكنك ذلك عن طريق إعطاءه هامشا أكثر كالتالي:

.main div:first-child{
   
  padding: 40px;
   
}

ولكن يبقى هذا الحل حلا مؤقتا إذ قد يتدخل إعطاء هامش بحجم كبير في تنسيق القسم وكسر النصوص، ولذلك فإنه يقترح الإستفادة من خواص الصندوق المرن flexbox لعمل هاته الفكرة. 

تأكد من إعطاء الخاصيتين التاليتين للحاوي الأب:

.main {
    width: 100%;
    min-height: 50vh;
    display: flex;
    background-color: #ECECEC;
  
    align-items: center; /* ++++++++++++++++++ */
    justify-content: center; /* ++++++++++++++++++ */
}

ثم من إعطاء الخاصية التالية لعناصر الأبناء:

.main div{
    align-items: center;
}

تعرف على CSS Flexbox وأساسيات استعماله لهيكلة صفحات الويب.